{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>本地存储</li>
  </ol>
<section class="demo-section">
<div id="pageContent">



<article><p>本地存储（Local storage）是在浏览器本地存储应用数据的好途径。相比较cookie拥有更大的存储空间（相同域下一般达到5M存储空间），使用更灵活，而且不会在每次提交中发送到服务器。几乎所有浏览器都支持本地存储，甚至包括IE8。</p><p>ZUI中提供了一系列方法用于读写本地存储数据。</p><p>当本地存储不可用，这些方法也会有效，但数据都会保存在内存中，当关闭浏览器后会消失。</p></article>


<section><header><h3>实例</h3></header><article><div class="example" id="storeExample">
  <div class="alert alert-success">
    <h4>本地存储可用，刷新页面或关闭浏览器不会丢失你的数据。</h4>
  </div>
  <div class="alert hide alert-warning">
    <h4>本地存储不可用！</h4>
  </div>
  <table class="table">
    <thead>
      <tr>
        <th style="width:80px">索引</th>
        <th style="width:40%">名称</th>
        <th>值</th>
        <th></th>
      </tr>
    </thead>
    <tbody id="storeTable"><tr><td>0</td><td class="store-name">doc_theme</td><td><pre style="padding: 5px; margin: 0px;" class="prettyprint prettyprinted"><span class="pun">{</span><span class="pln">
  </span><span class="str">"variables"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="str">"color-primary"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"#039BE5"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"color-secondary"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"#0288d1"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"color-pale"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"#e1f5fe"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"border-radius-base"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"4px"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"border-radius-large"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"6px"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"border-radius-small"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"2px"</span><span class="pln">
  </span><span class="pun">},</span><span class="pln">
  </span><span class="str">"name"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"blue"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"variablesLess"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"@color-primary: #039BE5;\n@color-secondary: #0288d1;\n@color-pale: #e1f5fe;\n@border-radius-base: 4px;\n@border-radius-large: 6px;\n@border-radius-small: 2px;\n"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"imports"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><span class="str">"src/less/basic/colorset.less"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"src/less/basic/variables.less"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"src/less/basic/mixins.less"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"src/less/theme.less"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"src/less/controls/icons.variables.less"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"src/less/doc.less"</span><span class="pln">
  </span><span class="pun">],</span><span class="pln">
  </span><span class="str">"css"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"a{color:#0288d1}a:hover,a:focus{color:#015785}.btn{border-radius:4px;color:#353535;background-color:#f2f2f2;border-color:#bfbfbf}.btn:hover,.btn:focus,.btn:active,.btn.active,.open .dropdown-toggle.btn{color:#353535;background-color:#dedede;border-color:#a1a1a1;box-shadow:0 2px 1px rgba(0,0,0,0.1)}.btn:active,.btn.active,.open .dropdown-toggle.btn{background-image:none;background-color:#ccc;border-color:#a6a6a6;box-shadow:inset 0 4px 6px rgba(0,0,0,0.15)}.btn.disabled,.btn[disabled],fieldset[disabled] .btn,.btn.disabled:hover,.btn[disabled]:hover,fieldset[disabled] .btn:hover,.btn.disabled:focus,.btn[disabled]:focus,fieldset[disabled] .btn:focus,.btn.disabled:active,.btn[disabled]:active,fieldset[disabled] .btn:active,.btn.disabled.active,.btn[disabled].active,fieldset[disabled] .btn.active{background-color:#f2f2f2;border-color:#bfbfbf}.btn:hover,.btn:focus,.btn:active,.btn.active,.open .dropdown-toggle.btn{color:#353535;background-color:#dedede;border-color:#a1a1a1;box-shadow:0 2px 1px rgba(0,0,0,0.1)}.btn:active,.btn.active,.open .dropdown-toggle.btn{background-image:none;background-color:#ccc;border-color:#a6a6a6;box-shadow:inset 0 4px 6px rgba(0,0,0,0.15)}.btn.disabled,.btn[disabled],fieldset[disabled] .btn,.btn.disabled:hover,.btn[disabled]:hover,fieldset[disabled] .btn:hover,.btn.disabled:focus,.btn[disabled]:focus,fieldset[disabled] .btn:focus,.btn.disabled:active,.btn[disabled]:active,fieldset[disabled] .btn:active,.btn.disabled.active,.btn[disabled].active,fieldset[disabled] .btn.active{background-color:#f2f2f2;border-color:#bfbfbf}.btn-primary{color:#fff;background-color:#039BE5;border-color:#038acc}.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active,.open .dropdown-toggle.btn-primary{color:#fff;background-color:#0280bd;border-color:#02618f;box-shadow:0 2px 1px rgba(0,0,0,0.1)}.btn-primary:active,.btn-primary.active,.open .dropdown-toggle.btn-primary{background-image:none;background-color:#026899;border-color:#026899;box-shadow:inset 0 4px 6px rgba(0,0,0,0.15)}.btn-primary.disabled,.btn-primary[disabled],fieldset[disabled] .btn-primary,.btn-primary.disabled:hover,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary:hover,.btn-primary.disabled:focus,.btn-primary[disabled]:focus,fieldset[disabled] .btn-primary:focus,.btn-primary.disabled:active,.btn-primary[disabled]:active,fieldset[disabled] .btn-primary:active,.btn-primary.disabled.active,.btn-primary[disabled].active,fieldset[disabled] .btn-primary.active{background-color:#039BE5;border-color:#038acc}.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active,.open .dropdown-toggle.btn-primary{color:#fff;background-color:#0280bd;border-color:#02618f;box-shadow:0 2px 1px rgba(0,0,0,0.1)}.btn-primary:active,.btn-primary.active,.open .dropdown-toggle.btn-primary{background-image:none;background-color:#026899;border-color:#026899;box-shadow:inset 0 4px 6px rgba(0,0,0,0.15)}.btn-primary.disabled,.btn-primary[disabled],fieldset[disabled] .btn-primary,.btn-primary.disabled:hover,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary:hover,.btn-primary.disabled:focus,.btn-primary[disabled]:focus,fieldset[disabled] .btn-primary:focus,.btn-primary.disabled:active,.btn-primary[disabled]:active,fieldset[disabled] .btn-primary:active,.btn-primary.disabled.active,.btn-primary[disabled].active,fieldset[disabled] .btn-primary.active{background-color:#039BE5;border-color:#038acc}.btn-warning{color:#fff;background-color:#f1a325;border-color:#ed980f}.btn-warning:hover,.btn-warning:focus,.btn-warning:active,.btn-warning.active,.open .dropdown-toggle.btn-warning{color:#fff;background-color:#df8f0e;border-color:#b4730c;box-shadow:0 2px 1px rgba(0,0,0,0.1)}.btn-warning:active,.btn-warning.active,.open .dropdown-toggle.btn-warning{background-image:none;background-color:#bd7a0c;border-color:#bd7a0c;box-shadow:inset 0 4px 6px rgba(0,0,0,0.15)}.btn-warning.disabled,.btn-warning[disabled],fieldset[disabled] .btn-warning,.btn-warning.disabled:hover,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning:hover,.btn-warning.disabled:focus,.btn-warning[disabled]:focus,fieldset[disabled] .btn-warning:focus,.btn-warning.disabled:active,.btn-warning[disabled]:active,fieldset[disabled] .btn-warning:active,.btn-warning.disabled.active,.btn-warning[disabled].active,fieldset[disabled] .btn-warning.active{background-color:#f1a325;border-color:#ed980f}.btn-warning:hover,.btn-warning:focus,.btn-warning:active,.btn-warning.active,.open .dropdown-toggle.btn-warning{color:#fff;background-color:#df8f0e;border-color:#b4730c;box-shadow:0 2px 1px rgba(0,0,0,0.1)}.btn-warning:active,.btn-warning.active,.open .dropdown-toggle.btn-warning{background-image:none;background-color:#bd7a0c;border-color:#bd7a0c;box-shadow:inset 0 4px 6px rgba(0,0,0,0.15)}.btn-warning.disabled,.btn-warning[disabled],fieldset[disabled] .btn-warning,.btn-warning.disabled:hover,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning:hover,.btn-warning.disabled:focus,.btn-warning[disabled]:focus,fieldset[disabled] .btn-warning:focus,.btn-warning.disabled:active,.btn-warning[disabled]:active,fieldset[disabled] .btn-warning:active,.btn-warning.disabled.active,.btn-warning[disabled].active,fieldset[disabled] .btn-warning.active{background-color:#f1a325;border-color:#ed980f}.btn-danger{color:#fff;background-color:#ea644a;border-color:#e75033}.btn-danger:hover,.btn-danger:focus,.btn-danger:active,.btn-danger.active,.open .dropdown-toggle.btn-danger{color:#fff;background-color:#e64525;border-color:#c63317;box-shadow:0 2px 1px rgba(0,0,0,0.1)}.btn-danger:active,.btn-danger.active,.open .dropdown-toggle.btn-danger{background-image:none;background-color:#cf3618;border-color:#cf3618;box-shadow:inset 0 4px 6px rgba(0,0,0,0.15)}.btn-danger.disabled,.btn-danger[disabled],fieldset[disabled] .btn-danger,.btn-danger.disabled:hover,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger:hover,.btn-danger.disabled:focus,.btn-danger[disabled]:focus,fieldset[disabled] .btn-danger:focus,.btn-danger.disabled:active,.btn-danger[disabled]:active,fieldset[disabled] .btn-danger:active,.btn-danger.disabled.active,.btn-danger[disabled].active,fieldset[disabled] .btn-danger.active{background-color:#ea644a;border-color:#e75033}.btn-danger:hover,.btn-danger:focus,.btn-danger:active,.btn-danger.active,.open .dropdown-toggle.btn-danger{color:#fff;background-color:#e64525;border-color:#c63317;box-shadow:0 2px 1px rgba(0,0,0,0.1)}.btn-danger:active,.btn-danger.active,.open .dropdown-toggle.btn-danger{background-image:none;background-color:#cf3618;border-color:#cf3618;box-shadow:inset 0 4px 6px rgba(0,0,0,0.15)}.btn-danger.disabled,.btn-danger[disabled],fieldset[disabled] .btn-danger,.btn-danger.disabled:hover,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger:hover,.btn-danger.disabled:focus,.btn-danger[disabled]:focus,fieldset[disabled] .btn-danger:focus,.btn-danger.disabled:active,.btn-danger[disabled]:active,fieldset[disabled] .btn-danger:active,.btn-danger.disabled.active,.btn-danger[disabled].active,fieldset[disabled] .btn-danger.active{background-color:#ea644a;border-color:#e75033}.btn-success{color:#fff;background-color:#38b03f;border-color:#329d38}.btn-success:hover,.btn-success:focus,.btn-success:active,.btn-success.active,.open .dropdown-toggle.btn-success{color:#fff;background-color:#2e9134;border-color:#236e27;box-shadow:0 2px 1px rgba(0,0,0,0.1)}.btn-success:active,.btn-success.active,.open .dropdown-toggle.btn-success{background-image:none;background-color:#26762a;border-color:#26762a;box-shadow:inset 0 4px 6px rgba(0,0,0,0.15)}.btn-success.disabled,.btn-success[disabled],fieldset[disabled] .btn-success,.btn-success.disabled:hover,.btn-success[disabled]:hover,fieldset[disabled] .btn-success:hover,.btn-success.disabled:focus,.btn-success[disabled]:focus,fieldset[disabled] .btn-success:focus,.btn-success.disabled:active,.btn-success[disabled]:active,fieldset[disabled] .btn-success:active,.btn-success.disabled.active,.btn-success[disabled].active,fieldset[disabled] .btn-success.active{background-color:#38b03f;border-color:#329d38}.btn-success:hover,.btn-success:focus,.btn-success:active,.btn-success.active,.open .dropdown-toggle.btn-success{color:#fff;background-color:#2e9134;border-color:#236e27;box-shadow:0 2px 1px rgba(0,0,0,0.1)}.btn-success:active,.btn-success.active,.open .dropdown-toggle.btn-success{background-image:none;background-color:#26762a;border-color:#26762a;box-shadow:inset 0 4px 6px rgba(0,0,0,0.15)}.btn-success.disabled,.btn-success[disabled],fieldset[disabled] .btn-success,.btn-success.disabled:hover,.btn-success[disabled]:hover,fieldset[disabled] .btn-success:hover,.btn-success.disabled:focus,.btn-success[disabled]:focus,fieldset[disabled] .btn-success:focus,.btn-success.disabled:active,.btn-success[disabled]:active,fieldset[disabled] .btn-success:active,.btn-success.disabled.active,.btn-success[disabled].active,fieldset[disabled] .btn-success.active{background-color:#38b03f;border-color:#329d38}.btn-info{color:#fff;background-color:#03b8cf;border-color:#03a2b6}.btn-info:hover,.btn-info:focus,.btn-info:active,.btn-info.active,.open .dropdown-toggle.btn-info{color:#fff;background-color:#0294a7;border-color:#026c7a;box-shadow:0 2px 1px rgba(0,0,0,0.1)}.btn-info:active,.btn-info.active,.open .dropdown-toggle.btn-info{background-image:none;background-color:#027584;border-color:#027584;box-shadow:inset 0 4px 6px rgba(0,0,0,0.15)}.btn-info.disabled,.btn-info[disabled],fieldset[disabled] .btn-info,.btn-info.disabled:hover,.btn-info[disabled]:hover,fieldset[disabled] .btn-info:hover,.btn-info.disabled:focus,.btn-info[disabled]:focus,fieldset[disabled] .btn-info:focus,.btn-info.disabled:active,.btn-info[disabled]:active,fieldset[disabled] .btn-info:active,.btn-info.disabled.active,.btn-info[disabled].active,fieldset[disabled] .btn-info.active{background-color:#03b8cf;border-color:#03a2b6}.btn-info:hover,.btn-info:focus,.btn-info:active,.btn-info.active,.open .dropdown-toggle.btn-info{color:#fff;background-color:#0294a7;border-color:#026c7a;box-shadow:0 2px 1px rgba(0,0,0,0.1)}.btn-info:active,.btn-info.active,.open .dropdown-toggle.btn-info{background-image:none;background-color:#027584;border-color:#027584;box-shadow:inset 0 4px 6px rgba(0,0,0,0.15)}.btn-info.disabled,.btn-info[disabled],fieldset[disabled] .btn-info,.btn-info.disabled:hover,.btn-info[disabled]:hover,fieldset[disabled] .btn-info:hover,.btn-info.disabled:focus,.btn-info[disabled]:focus,fieldset[disabled] .btn-info:focus,.btn-info.disabled:active,.btn-info[disabled]:active,fieldset[disabled] .btn-info:active,.btn-info.disabled.active,.btn-info[disabled].active,fieldset[disabled] .btn-info.active{background-color:#03b8cf;border-color:#03a2b6}.btn-link{color:#0288d1;background-color:transparent}.btn-link,.btn-link:active,.btn-link[disabled],fieldset[disabled] .btn-link,.btn-link:hover,.btn-link:focus{border-color:transparent;box-shadow:none}.btn-link:hover,.btn-link:focus{color:#015785}.btn-link[disabled]:hover,fieldset[disabled] .btn-link:hover,.btn-link[disabled]:focus,fieldset[disabled] .btn-link:focus{color:#ddd}.popover,.tooltip-inner{border-radius:4px}.label{border-radius:2px}.label-badge{border-radius:9px}.label-dot{border-radius:5px}.label-primary{background-color:#039BE5}.label-primary[href]:hover,.label-primary[href]:focus{color:#fff;background-color:#0279b3}.label-primary.label-circle{background:none;border:1px solid #039BE5;color:#039BE5}.label-primary[href]:hover,.label-primary[href]:focus{background-color:#0279b3}.label-success{background-color:#38b03f}.label-success[href]:hover,.label-success[href]:focus{color:#fff;background-color:#2c8931}.label-success.label-circle{background:none;border:1px solid #38b03f;color:#38b03f}.label-success[href]:hover,.label-success[href]:focus{background-color:#2c8931}.label-info{background-color:#03b8cf}.label-info[href]:hover,.label-info[href]:focus{color:#fff;background-color:#028b9d}.label-info.label-circle{background:none;border:1px solid #03b8cf;color:#03b8cf}.label-info[href]:hover,.label-info[href]:focus{background-color:#028b9d}.label-warning{background-color:#f1a325}.label-warning[href]:hover,.label-warning[href]:focus{color:#fff;background-color:#d5890e}.label-warning.label-circle{background:none;border:1px solid #f1a325;color:#f1a325}.label-warning[href]:hover,.label-warning[href]:focus{background-color:#d5890e}.label-danger{background-color:#ea644a}.label-danger[href]:hover,.label-danger[href]:focus{color:#fff;background-color:#e53d1c}.label-danger.label-circle{background:none;border:1px solid #ea644a;color:#ea644a}.label-danger[href]:hover,.label-danger[href]:focus{background-color:#e53d1c}.btn-primary .label-badge,.btn-primary .label-dot{background-color:#51c5fd}.text-primary{color:#039BE5}.text-primary:hover{color:#0279b3}.text-warning{color:#f1a325}.text-warning:hover{color:#d5890e}.text-danger{color:#ea644a}.text-danger:hover{color:#e53d1c}.text-success{color:#38b03f}.text-success:hover{color:#2c8931}.text-info{color:#03b8cf}.text-info:hover{color:#028b9d}.text-important{color:#bd7b46}.text-important:hover{color:#996337}.text-special{color:#8666b8}.text-special:hover{color:#6c4aa1}.text-muted a:hover,.text-muted a:active{color:#0288d1}.text-link:hover,.text-link:active{color:#0288d1}.bg-primary{background-color:#039BE5}a.bg-primary:hover{background-color:#0279b3}.hl-primary{background-color:#e1f5fe}a.hl-primary:hover{background-color:#b0e5fc}.form-control{border-radius:4px}.form-control:focus,.form-control.focus{border-color:#0288d1;outline:0;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(2,136,209,0.6)}.form-control:focus{border-color:#0288d1;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(2,136,209,0.6)}.form-condensed .form-control,.form-condensed .btn{border-radius:4px}.switch&gt;input:checked+label:before{background-color:#039BE5;border-color:#039BE5}.switch input:focus+label{color:#039BE5}.switch input:focus+label:before{border-color:#039BE5}.form-control:focus+.input-control-label-left{color:#0288d1}.btn-group-vertical&gt;.btn:not(:first-child):not(:last-child){border-radius:0}.btn-group-vertical&gt;.btn:first-child:not(:last-child):not(.dropdown-toggle){border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical&gt;.btn:last-child:not(:first-child){border-bottom-left-radius:4px;border-top-right-radius:0;border-top-left-radius:0}.btn-group-vertical&gt;.btn-group:not(:first-child):not(:last-child)&gt;.btn{border-radius:0}.btn-group-vertical&gt;.btn-group:first-child&gt;.btn:last-child,.btn-group-vertical&gt;.btn-group:first-child&gt;.dropdown-toggle{border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical&gt;.btn-group:last-child&gt;.btn:first-child{border-top-right-radius:0;border-top-left-radius:0}.input-group-addon{background-color:#e5e5e5}.input-group-addon:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child),.input-group .form-control:not(:first-child):not(:last-child){border-radius:0}.input-group-addon{border-radius:4px}.input-group-btn.fix-border&gt;.btn{border-radius:0}.input-group .form-control:first-child,.input-group-addon:first-child,.input-group-btn:first-child&gt;.btn,.input-group-btn:first-child&gt;.btn-group&gt;.btn,.input-group-btn:first-child&gt;.dropdown-toggle,.input-group-btn:last-child&gt;.btn:not(:last-child):not(.dropdown-toggle),.input-group-btn:last-child&gt;.btn-group:not(:last-child)&gt;.btn{border-bottom-right-radius:0;border-top-right-radius:0}.input-group .form-control:last-child,.input-group-addon:last-child,.input-group-btn:last-child&gt;.btn,.input-group-btn:last-child&gt;.btn-group&gt;.btn,.input-group-btn:last-child&gt;.dropdown-toggle,.input-group-btn:first-child&gt;.btn:not(:first-child),.input-group-btn:first-child&gt;.btn-group:not(:first-child)&gt;.btn{border-bottom-left-radius:0;border-top-left-radius:0}.list-group-item{background-color:#fff;border:1px solid #ddd}.list-group-item:first-child{border-top-right-radius:4px;border-top-left-radius:4px}.list-group-item:last-child{margin-bottom:0;border-bottom-right-radius:4px;border-bottom-left-radius:4px}a.list-group-item{color:#555}a.list-group-item .list-group-item-heading{color:#333}a.list-group-item:hover,a.list-group-item:focus{text-decoration:none;background-color:#e1f5fe;color:#353535}.list-group-item.active,.list-group-item.active:hover,.list-group-item.active:focus{background-color:#039BE5;border-color:#039BE5;color:#fff}.list-group-item.active .list-group-item-heading,.list-group-item.active:hover .list-group-item-heading,.list-group-item.active:focus .list-group-item-heading{color:inherit}.list-group-item.active .list-group-item-text,.list-group-item.active:hover .list-group-item-text,.list-group-item.active:focus .list-group-item-text{color:#e6e6e6}.list-group-item-heading{color:#333}.navbar-toggle{border-radius:4px}@media (min-width:768px){.navbar{border-radius:4px}}.navbar-inverse{background-color:#0288d1;border-color:#02679e}.navbar-inverse .navbar-nav&gt;li.nav-heading{background-color:#0278b8}.navbar-inverse .navbar-nav&gt;li&gt;a:hover,.navbar-inverse .navbar-nav&gt;li&gt;a:focus{background-color:#029cef}.navbar-inverse .navbar-nav&gt;.active&gt;a,.navbar-inverse .navbar-nav&gt;.active&gt;a:hover,.navbar-inverse .navbar-nav&gt;.active&gt;a:focus{background-color:#09a7fd}.navbar-inverse .navbar-toggle{border-color:#09a7fd}.navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus{background-color:#0278b8}.navbar-inverse .navbar-collapse,.navbar-inverse .navbar-form{border-color:#0271ae}.navbar-inverse .navbar-nav&gt;.open&gt;a,.navbar-inverse .navbar-nav&gt;.open&gt;a:hover,.navbar-inverse .navbar-nav&gt;.open&gt;a:focus{background-color:#09a7fd}@media (max-width:767px){.navbar-inverse .navbar-nav .open .dropdown-menu&gt;.dropdown-header{border-color:#02679e}.navbar-inverse .navbar-nav .open .dropdown-menu&gt;li&gt;a:hover,.navbar-inverse .navbar-nav .open .dropdown-menu&gt;li&gt;a:focus{background-color:#029cef}.navbar-inverse .navbar-nav .open .dropdown-menu&gt;.active&gt;a,.navbar-inverse .navbar-nav .open .dropdown-menu&gt;.active&gt;a:hover,.navbar-inverse .navbar-nav .open .dropdown-menu&gt;.active&gt;a:focus{background-color:#09a7fd}}.navbar-fixed-left.navbar-inverse .navbar-header,.navbar-fixed-left.navbar-inverse .navbar-nav{border-bottom:1px solid #09a7fd;box-shadow:inset 0 -1px 0 #02679e}.navbar-fixed-left.navbar-inverse.navbar-collapsed .navbar-nav&gt;li.nav-heading:hover{color:#eaeaea;background-color:#026ea9}.nav&gt;li&gt;a:hover,.nav&gt;li&gt;a:focus{color:#015785}.nav .open&gt;a,.nav .open&gt;a:hover,.nav .open&gt;a:focus{border-color:#0288d1}.nav-pills&gt;li.active&gt;a,.nav-pills&gt;li.active&gt;a:hover,.nav-pills&gt;li.active&gt;a:focus{background-color:#039BE5}.nav-primary&gt;li:first-child&gt;a{border-bottom-left-radius:4px;border-top-left-radius:4px}.nav-primary&gt;li:last-child&gt;a{border-bottom-right-radius:4px;border-top-right-radius:4px}.nav-primary&gt;li&gt;a{border:1px solid #ddd}.nav-primary&gt;li.active&gt;a,.nav-primary&gt;li.active&gt;a:hover,.nav-primary&gt;li.active&gt;a:focus{background-color:#039BE5;border-color:#039BE5;color:#fff}.nav-secondary&gt;li.active&gt;a,.nav-secondary&gt;li.active&gt;a:hover,.nav-secondary&gt;li.active&gt;a:focus{color:#039BE5;border-bottom-color:#039BE5}.nav-stacked.nav-primary&gt;li,.nav-stacked.nav-primary&gt;li&gt;a{border-bottom-right-radius:0;border-bottom-left-radius:0}.nav-stacked.nav-primary&gt;li:first-child&gt;a,.nav-stacked.nav-primary&gt;li:first-child.nav-heading{border-top-right-radius:4px;border-top-left-radius:4px}.nav-stacked.nav-primary&gt;li:last-child&gt;a{border-top-right-radius:0;border-top-left-radius:0;border-bottom-right-radius:4px;border-bottom-left-radius:4px}.nav-stacked.nav-primary&gt;li.nav-heading{border:1px solid #ddd;background-color:#f1f1f1}.nav-stacked.nav-secondary&gt;li&gt;a{border-bottom-right-radius:4px;border-top-right-radius:4px;box-shadow:inset 2px 0 0 #f5f5f5}.nav-stacked.nav-secondary&gt;li&gt;a:hover{box-shadow:inset 2px 0 0 #e5e5e5}.nav-stacked.nav-secondary&gt;li.active&gt;a,.nav-stacked.nav-secondary&gt;li.active&gt;a:hover,.nav-stacked.nav-secondary&gt;li.active&gt;a:focus{background-color:#f5f5f5;box-shadow:inset 2px 0 0 #039BE5}.nav-stacked.nav-secondary&gt;li.nav-heading{border-bottom:1px solid #ddd}.nav-tabs&gt;li&gt;a{border-radius:4px 4px 0 0}.pager{border-radius:4px}.pager&gt;li&gt;a,.pager&gt;li&gt;span{background-color:#fff;border:1px solid #ddd}.pager&gt;li:first-child&gt;a,.pager&gt;li:first-child&gt;span{border-bottom-left-radius:4px;border-top-left-radius:4px}.pager&gt;li:last-child&gt;a,.pager&gt;li:last-child&gt;span{border-bottom-right-radius:4px;border-top-right-radius:4px}.pager&gt;li&gt;a:hover,.pager&gt;li&gt;span:hover,.pager&gt;li&gt;a:focus,.pager&gt;li&gt;span:focus{background-color:#e5e5e5}.pager&gt;li.active&gt;a,.pager&gt;li.active&gt;span,.pager&gt;li.active&gt;a:hover,.pager&gt;li.active&gt;span:hover{color:#fff;background-color:#039BE5;border-color:#039BE5}.pager&gt;li.disabled&gt;span,.pager&gt;li.disabled&gt;span:hover,.pager&gt;li.disabled&gt;span:focus,.pager&gt;li.disabled&gt;a,.pager&gt;li.disabled&gt;a:hover,.pager&gt;li.disabled&gt;a:focus{color:#ddd;background-color:#fff;border-color:#ddd}.panel{border-radius:4px;box-shadow:none}.panel&gt;.panel-heading{background-image:none;border-top-left-radius:4px;border-top-right-radius:4px}.panel-group .panel{border-radius:4px}.dashboard .panel{box-shadow:none}.panel-primary{border-color:#039BE5}.panel-primary&gt;.panel-heading{color:#fff;background-color:#039BE5;border-color:#039BE5}.panel-primary&gt;.panel-heading+.panel-collapse .panel-body{border-top-color:#039BE5}.panel-primary&gt;.panel-footer+.panel-collapse .panel-body{border-bottom-color:#039BE5}.panel-success&gt;.panel-body,.panel-warning&gt;.panel-body,.panel-primary&gt;.panel-body,.panel-info&gt;.panel-body,.panel-danger&gt;.panel-body{box-shadow:none}.table-hover&gt;tbody&gt;tr:hover&gt;td,.table-hover&gt;tbody&gt;tr:hover&gt;th{background-color:#e1f5fe}.table tr&gt;td.active,.table tr&gt;th.active,.table tr.active&gt;td,.table tr.active&gt;th{background-color:#ffe7bc}table.tablesorter thead tr .headerSortUp:after,table.tablesorter thead tr .headerSortDown:after{color:#0288d1 !important}.chosen-container-single .chosen-search:focus,.chosen-container-single .chosen-search input[type=\"text\"]:focus{border-color:#0288d1 !important}.chosen-container-single .chosen-single{border-radius:4px !important}.chosen-container-single.chosen-with-drop .chosen-single{border-bottom-right-radius:0 !important;border-bottom-left-radius:0 !important}.chosen-container-single.chosen-with-drop.chosen-up .chosen-single{border-bottom-right-radius:#0288d1 !important;border-bottom-left-radius:#0288d1 !important;border-top-right-radius:0 !important;border-top-left-radius:0 !important}.chosen-container .chosen-results li.highlighted{background-color:#039BE5 !important}.chosen-container-active .chosen-single{border-color:#0288d1 !important}.chosen-container-active.chosen-with-drop .chosen-single{border-color:#cbcbcb !important;border-color:rgba(0,0,0,0.15) !important}.chosen-container-active .chosen-choices{border-color:#0288d1 !important}.chosen-container-multi .chosen-choices{border-radius:4px !important}.chosen-container-multi.chosen-with-drop .chosen-choices{border-bottom-right-radius:0 !important;border-bottom-left-radius:0 !important}.chosen-container-multi.chosen-with-drop.chosen-up .chosen-choices{border-bottom-right-radius:#0288d1 !important;border-bottom-left-radius:#0288d1 !important;border-top-right-radius:0 !important;border-top-left-radius:0 !important}.menu&gt;.nav&gt;li&gt;.nav{background-color:#f6f6f6}.menu&gt;.nav&gt;li&gt;.nav&gt;li&gt;a{border:1px solid #ddd}.menu&gt;.nav&gt;li&gt;.nav&gt;li&gt;a:hover,.menu&gt;.nav&gt;li&gt;.nav&gt;li&gt;a:focus{background-color:#e4e4e4}.menu&gt;.nav&gt;li&gt;.nav&gt;li.active&gt;a,.menu&gt;.nav&gt;li&gt;.nav&gt;li.active&gt;a:hover,.menu&gt;.nav&gt;li&gt;.nav&gt;li.active&gt;a:focus{background-color:#039BE5;border-color:#039BE5;color:#fff}.menu&gt;.nav&gt;li:first-child&gt;a,.menu&gt;.nav&gt;li:first-child.nav-heading{border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:4px;border-top-left-radius:4px}.menu&gt;.nav&gt;li:last-child&gt;a{border-top-right-radius:0;border-top-left-radius:0;border-bottom-right-radius:4px;border-bottom-left-radius:4px}.menu&gt;.nav&gt;li:first-child&gt;a,.menu&gt;.nav&gt;li:first-child.nav-heading{border-top-right-radius:4px;border-top-left-radius:4px}.menu&gt;.nav&gt;li.show&gt;a,.menu&gt;.nav&gt;li.show&gt;a:hover,.menu&gt;.nav&gt;li.show&gt;a:focus{color:#353535;background-color:#fff;border-color:#ddd}.menu&gt;.nav&gt;li.show&gt;a&gt;[class*='icon-'],.menu&gt;.nav&gt;li.show&gt;a:hover&gt;[class*='icon-'],.menu&gt;.nav&gt;li.show&gt;a:focus&gt;[class*='icon-']{color:#353535}.menu&gt;.nav&gt;li.show&gt;a:hover{background-color:#f1f1f1}.menu&gt;.nav&gt;li.show:last-child&gt;a{border-bottom-right-radius:0;border-bottom-left-radius:0}.menu&gt;.nav&gt;li.show:last-child&gt;.nav&gt;li:last-child&gt;a{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.menu&gt;.nav&gt;li.nav-heading{border:1px solid #ddd;background-color:#f1f1f1}.dropdown-menu{border-radius:4px}.dropdown-menu&gt;li&gt;a:hover,.dropdown-menu&gt;li&gt;a:focus{background-color:#039BE5}.dropdown-menu&gt;.active&gt;a,.dropdown-menu&gt;.active&gt;a:hover,.dropdown-menu&gt;.active&gt;a:focus{background-color:#039BE5}.dropdown-submenu:hover&gt;a,.dropdown-submenu:focus&gt;a{background-color:#039BE5}.dropdown-submenu:hover&gt;a:after{border-left-color:#fff}.datetimepicker td.day.today{background-color:#f1a325 !important;border-color:#f1a325 !important}.datetimepicker td.day.active{background-color:#039BE5 !important;border-color:#0279b3 !important}.datetimepicker td.day.active:hover{background-color:#0279b3 !important}.datetimepicker td.day.today:hover,.datetimepicker td.day.today.active:hover{background-color:#d5890e !important}.ke-container{border-radius:4px !important}.ke-container.focus{border-color:#0288d1 !important;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(2,136,209,0.6) !important}.ke-menu-item-on{background-color:#039BE5 !important}.ke-colorpicker-cell-on{background-color:#039BE5 !important}.ke-input-text:focus{border-color:#0288d1 !important;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(2,136,209,0.6) !important}.messager{border-radius:4px}.messager-primary{background-color:#039BE5}.messager-success{background-color:#38b03f}.messager-info{background-color:#03b8cf}.messager-warning{background-color:#f1a325}.messager-danger{background-color:#ea644a}.messager-important{background-color:#bd7b46}.messager-special{background-color:#8666b8}.comment:hover&gt;.content&gt;.actions&gt;a{color:#0288d1}.alert:not(.alert-block){border-radius:2px}.alert-primary{background-color:#e1f5fe;color:#282828}.alert-primary hr{border-top-color:#bee9fd}.alert-primary .alert-link{color:#161616}.alert-success{background-color:#ddf4df;color:#329d38}.alert-success hr{border-top-color:#bae8b6}.alert-success .alert-link{color:#29822e}.alert-info{background-color:#ddf3f5;color:#03a2b6}.alert-info hr{border-top-color:#a2e4de}.alert-info .alert-link{color:#028293}.alert-warning{background-color:#fff0d5;color:#ed980f}.alert-warning hr{border-top-color:#ffdcbc}.alert-warning .alert-link{color:#cc830d}.alert-danger{background-color:#ffe5e0;color:#e75033}.alert-danger hr{border-top-color:#ffc6c7}.alert-danger .alert-link{color:#dd391a}.alert-primary-inverse{background-color:#039BE5;border-color:#039BE5;color:#fff}.alert-primary-inverse hr{border-top-color:#ddd;border-top-color:rgba(221,221,221,0.25)}.alert-primary-inverse .alert-link{color:rgba(255,255,255,0.8)}.modal-dialog{border-radius:6px}.card{box-shadow:none;border-radius:4px}pre{border-radius:4px}.datagrid .datagrid-hover-row .datagrid-row-cell:hover .datagrid-cell,.datagrid .datagrid-hover-col .datagrid-cell.hover,.datagrid .datagrid-hover-col .datagrid-row-cell.active .datagrid-cell.hover{background-color:#e1f5fe}.datagrid .datagrid-loading&gt;.content&gt;.icon,.datagrid .datagrid-sort-up&gt;.icon-sort:before,.datagrid .datagrid-sort-down&gt;.icon-sort:before{color:#039BE5}.tree-drag-holder{background-color:#e1f5fe}.tree-menu li.active&gt;a{background-color:#039BE5;border-color:#039BE5;color:#fff}.tree-menu li.active&gt;.list-toggle{color:#fff}.icon-xuanxuan{display:inline-block !important;width:24px;height:24px;background-size:cover;background-position:center;background-repeat:no-repeat;background-image:url(\"\")}.icon-10x{font-size:140px}@media (min-width:992px){.col-md-d5{width:20%}}.slide-in-up-100{position:relative;top:100px}.slide-in-up-100.in{top:0}.slide-in-right-50{position:relative;left:50px}.slide-in-right-50.in{left:0}.grow-up-in-height.show{height:0;overflow:hidden}.grow-up-in-height.show.in{height:auto}.margin-zero{margin:0 !important}@-webkit-keyframes glow{0%{-webkit-box-shadow:0 0 12px rgba(71,164,71,0.1);border-color:rgba(71,164,71,0.9)}100%{-webkit-box-shadow:0 0 18px rgba(26,128,26,0.8),0 0 12px rgba(71,164,71,0.5);border-color:#1a801a}}.example{position:relative;padding:20px;margin:0 0 15px;border-style:solid;border:1px solid #ddd;outline:none;transition:all .3s}.example:focus,.example [contenteditable]:focus{outline:none;box-shadow:0 1px 15px rgba(0,0,0,0.5);-webkit-animation-name:glow;-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:alternate;-webkit-animation-timing-function:ease-in-out}.example.no-padding{padding:0}.example.borderless{border:none}.example&gt;*:last-child{margin-bottom:0}pre{margin-bottom:15px;border-radius:0;position:relative;border-color:#ddd;padding:10px 20px}pre em{display:inline-block;font-weight:700}pre:hover em{background-color:#ffe5e0}pre&gt;code:before{position:absolute;top:4px;right:4px;font-size:12px;line-height:16px;padding:0 4px;display:inline-block;transition:opacity .2s;color:#fff;border-radius:2px;background-color:#bbb;background-color:rgba(0,0,0,0.15);pointer-events:none}pre:hover&gt;code:before{opacity:0}pre&gt;code.lang-javascript:before,pre&gt;code.lang-js:before{content:'javascript'}pre&gt;code.lang-html:before{content:'html'}pre&gt;code.lang-css:before{content:'css'}pre.linenums{padding:10px}.example+pre,pre+pre{margin:-15px 0 15px;border-radius:0;border:1px solid #DDD;border-top:none}.copyable{position:relative}.btn-copy-code{position:absolute;right:3px;top:3px;background-color:rgba(255,255,255,0.5);border-radius:3px;width:28px;height:28px;padding:3px 0;line-height:20px;text-shadow:none;opacity:0}.btn-copy-code&gt;.icon{line-height:20px}.btn-copy-code:hover{background-color:#fff;color:#0288d1;border-color:#039BE5}pre:hover&gt;.btn-copy-code,.copyable:hover&gt;.btn-copy-code,.copyable.fixed-copy-btn&gt;.btn-copy-code{opacity:1}.nav-examples.nav-tabs&gt;li&gt;a{border-radius:0}.nav-examples+.example{border-top-color:transparent}a.avatar{display:block;width:40px;height:40px;text-align:center;background-color:#e5e5e5;border-radius:4px;margin-top:5px !important;color:#aaa !important;font-size:30px;line-height:40px}body&gt;.tooltip{z-index:9999}a.avatar&gt;i{font-size:28px}a.avatar:hover{text-decoration:none}.loader{color:#808080;transition:all .4s cubic-bezier(.175, .885, .32, 1);text-align:center;padding:0;opacity:0;filter:alpha(opacity=0);height:0;overflow:hidden;transform:scale(.5)}.loader&gt;.icon{font-size:42px;display:block;height:50px;width:50px;line-height:50px;margin:0 auto}.loader.loading,.loader.with-error{padding:80px 0;opacity:1;filter:alpha(opacity=100);height:auto;transform:scale(1)}.loader.loading&gt;.error-text{display:none}.loader.with-error&gt;.icon-spin{-moz-animation:none;-o-animation:none;-webkit-animation:none;animation:none}.loader.with-error&gt;.icon-spin:before{content:'\\e664'}.loader.with-error&gt;.error-text{display:inline}.loader.with-error&gt;.loading-text{display:none}.template{display:none}.path-zui-36{display:inline-block;background-color:#fff;border-radius:18px;height:36px;width:36px;position:relative;overflow:hidden}.path-zui-36:before,.path-zui-36:after{content:' ';display:block;position:absolute;border:2px solid #039BE5;left:11px;width:14px;height:4px}.path-zui-36:before{top:9px;border-bottom:none}.path-zui-36:after{top:23px;border-top:none}.path-zui-36 .path-1,.path-zui-36 .path-2,.path-zui-36 .path-1:before,.path-zui-36 .path-1:after,.path-zui-36 .path-2:before{display:block;content:' ';position:absolute;width:2px;height:2px;background-color:#039BE5}.path-zui-36 .path-1{left:15px;top:19px}.path-zui-36 .path-1:before,.path-zui-36 .path-2:before{left:-2px;top:2px}.path-zui-36 .path-1:after{left:2px;top:-2px}.path-zui-36 .path-2{left:21px;top:13px}.path-btn{border-radius:0}.path-btn:focus,.path-btn:active{outline:none;background:none}.path-btn:before,.path-btn:after,.path-btn&gt;.path-1,.path-btn&gt;.path-1:before,.path-btn&gt;.path-1:after{transition:all .2s cubic-bezier(.175, .885, .32, 1);position:absolute;content:' ';display:block;height:2px;width:10px;border:2px solid #808080;border:2px solid rgba(0,0,0,0.4);left:19px;top:18px}.path-btn:after{top:26px}.path-btn&gt;.path-1{top:22px;left:23px}.path-btn&gt;.path-1:before,.path-btn&gt;.path-1:after{left:-4px;top:-2px;width:6px}.path-btn&gt;.path-1:after{top:2px}.path-btn:hover{background-color:#e5e5e5;background-color:rgba(0,0,0,0.1)}.path-btn:hover:before,.path-btn:hover:after,.path-btn:hover&gt;.path-1,.path-btn:hover&gt;.path-1:before,.path-btn:hover&gt;.path-1:after{border-color:#353535;transform:rotate(180deg)}.path-btn:hover:before{top:26px}.path-btn:hover:after{top:18px}.path-btn:hover&gt;.path-1{left:15px}.path-btn:hover&gt;.path-1:before{top:2px;left:-4px}.path-btn:hover&gt;.path-1:after{top:-2px;left:-4px}.path-btn.path-close-btn:before,.path-btn.path-close-btn:after,.path-btn.path-close-btn&gt;.path-1,.path-btn.path-close-btn&gt;.path-1:before,.path-btn.path-close-btn&gt;.path-1:after{border-top:0;border-bottom:0}.path-btn.path-close-btn&gt;.path-1{border-right:0}body{transition:background .2s cubic-bezier(.175, .885, .32, 1)}#header{color:#fff;margin-bottom:20px;padding-top:80px;transition:padding 0.2s cubic-bezier(0.175, 0.885, 0.32, 1), height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1), background-color 0.2s cubic-bezier(0.175, 0.885, 0.32, 1)}#header small{opacity:.65;filter:alpha(opacity=65)}#navDownloadLink{transition:opacity .2s cubic-bezier(.175, .885, .32, 1);opacity:0;filter:alpha(opacity=0)}#navbar{transition:padding-top .4s cubic-bezier(.175, .885, .32, 1);padding:20px 0;border-bottom:none}#navbar&gt;.container{position:relative}#navbar.navbar-inverse{background:none}#navbar.navbar-inverse .navbar-toggle{border:none;border-radius:0}#navbar .navbar-nav&gt;li&gt;a{line-height:20px;height:40px;border-radius:4px}#navbar .navbar-nav&gt;li&gt;a:hover,#navbar .navbar-nav&gt;li&gt;a:focus{background-color:rgba(0,0,0,0.2)}#navbar .navbar-nav&gt;li&gt;a&gt;.icon{font-size:18px}#navbar .navbar-brand{position:relative;padding-left:58px}#navbar .path-zui-36{position:absolute;top:0;left:10px}#navbar .navbar-collapse.in,#navbar .navbar-collapse.collapsing{background-color:#fff;margin-top:10px;border:none;width:150px;float:right;box-shadow:0 6px 12px rgba(0,0,0,0.175);position:relative;overflow:visible}#navbar .navbar-collapse.in #navDownloadLink,#navbar .navbar-collapse.collapsing #navDownloadLink{opacity:1;filter:alpha(opacity=100)}#navbar .navbar-collapse.in:before,#navbar .navbar-collapse.collapsing:before{content:' ';display:block;position:absolute;width:0;height:0;top:-20px;right:20px;border-width:10px;border-style:dashed dashed solid dashed;border-color:transparent transparent #fff transparent}#navbar .navbar-collapse.in .navbar-nav&gt;li&gt;a,#navbar .navbar-collapse.collapsing .navbar-nav&gt;li&gt;a{color:#353535;opacity:0;filter:alpha(opacity=0)}#navbar .navbar-collapse.in .navbar-nav&gt;li&gt;a{opacity:1;filter:alpha(opacity=100)}#compactTogger{display:none;font-size:18px}#heading{text-align:center;position:relative;overflow:hidden}#heading&gt;h1{font-size:48px;font-weight:normal;margin-top:0}#heading&gt;p{opacity:.65;filter:alpha(opacity=65)}#download{padding-top:20px;text-align:center}#download&gt;.btn-lg{border-color:#e5e5e5;border-color:rgba(255,255,255,0.65);margin-bottom:15px}#download&gt;.btn-lg+.btn{margin-left:10px}#download&gt;.btn-lg&gt;.icon{position:relative;margin-left:6px;margin-right:-3px;top:-1px}#download&gt;.btn-lg.btn-white{background:#fff;color:#039BE5;opacity:.9}#download&gt;.btn-lg.btn-white:hover,#download&gt;.btn-lg.btn-white:focus,#download&gt;.btn-lg.btn-white:active{opacity:1;color:#0288d1}#search{max-width:800px;margin:0 auto;padding:60px 20px 70px}#searchForm{position:relative}#searchForm&gt;.icon{position:absolute;left:14px;top:14px;opacity:.65;filter:alpha(opacity=65);display:block;width:16px;text-align:center;height:16px;color:#fff}#searchInput{background:none;border-radius:21px;padding-left:40px;border:1px solid #e5e5e5;border-color:rgba(255,255,255,0.6);color:#fff}#searchInput::placeholder{color:#e5e5e5}#searchInput::placeholder{color:rgba(255,255,255,0.5)}#searchInput:focus{border-color:#fff;background-color:rgba(255,255,255,0.1);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px rgba(51,51,51,0.275)}#searchHelpBtn{position:absolute;right:4px;top:4px;text-align:center;border-radius:20px;width:35px;height:35px;line-height:39px;padding:0;color:#fff;opacity:.65;filter:alpha(opacity=65);outline:none}#searchHelpBtn:hover,#searchHelpBtn:active,#searchHelpBtn:focus{background-color:#808080;background-color:rgba(0,0,0,0.5)}#searchHelpBtn&gt;.icon{font-size:18px}#search.with-query-text #searchHelpBtn&gt;.icon:before{content:'\\d7'}#ad{transition:opacity .2s;padding-bottom:20px;margin-top:-50px}#ad&gt;a{opacity:.8;color:#fff;display:block;padding:10px;background:rgba(0,0,0,0.15);border-radius:4px;font-size:14px;width:340px;margin:0 auto;position:relative;overflow:hidden}#ad&gt;a:after,#ad&gt;a:before{content:' ';position:absolute;top:0;bottom:0;transform:skewX(-45deg) translate(-120px, 0);width:100px;left:0;background-color:rgba(255,255,255,0.2);opacity:1;transition:transform .3s,opacity .3s}#ad&gt;a:after{top:20px;right:0;transform:none;width:auto;background-color:rgba(0,0,0,0.1)}#ad&gt;a:hover,#ad&gt;a:focus{opacity:1;background:rgba(0,0,0,0.2);text-decoration:none;box-shadow:rgba(0,0,0,0.12) 0 1px 6px,rgba(0,0,0,0.15) 0 1px 4px}#ad&gt;a:hover:before,#ad&gt;a:focus:before{opacity:1;transform:skewX(-45deg) translate(360px, 0)}#xuanxuan{position:relative !important;padding-left:33px !important;padding-right:0 !important;background-image:url() !important;transition:all .3s}#xuanxuan .icon-xuanxuan{display:block !important;position:absolute;top:9px;left:10px}#xuanxuan:hover{background-image:url() !important;background-color:transparent !important}body.ad-hover.ad-xuanxuan #download .btn-primary,body.ad-hover.ad-xuanxuan #header{transition:.5s background-color;background-color:#912bff !important}body.ad-hover.ad-xuanxuan #download .btn-white{color:#912bff !important}#grid{position:relative}#grid&gt;.container&gt;.row&gt;.col.hide{display:block;width:0;opacity:0;filter:alpha(opacity=0);padding:0}#grid&gt;.container&gt;.row+.row{padding-top:10px;border-top:1px solid #f1f1f1}#grid .chapter{margin-bottom:30px}#grid .chapter-heading&gt;h4{margin-bottom:15px}#grid .chapter-heading&gt;h4&gt;.name{cursor:pointer}#grid .chapter-heading&gt;h4&gt;.name:after{font-family:ZenIcon;speak:none;font-size:14px;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block;display:none\\0;margin-left:5px;content:'\\e6dd';position:relative;left:-10px;opacity:0;filter:alpha(opacity=0);transition:opacity 0.2s cubic-bezier(0.175, 0.885, 0.32, 1), left 0.2s cubic-bezier(0.175, 0.885, 0.32, 1)}#grid .chapter-heading&gt;h4&gt;.name:hover:after{left:0;opacity:1;filter:alpha(opacity=100)}#grid .card{background-color:#fff;transition:border 0.1s cubic-bezier(0.175, 0.885, 0.32, 1), height 0.1s cubic-bezier(0.175, 0.885, 0.32, 1), transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1), top 0.1s cubic-bezier(0.175, 0.885, 0.32, 1), left 0.1s cubic-bezier(0.175, 0.885, 0.32, 1), opcity 0.1s cubic-bezier(0.175, 0.885, 0.32, 1);display:none;margin-bottom:0;border-color:#fff;box-shadow:none}#grid .card.show{display:block}#grid .card.choosed{border-color:#808080}#grid .card.choosed:before{transition:right .1s cubic-bezier(.175, .885, .32, 1);content:'Enter';display:block;position:absolute;right:-100%;top:0;padding:3px 8px;color:#fff;border-radius:0 3px 0 3px}#grid .card[data-target=\"external\"].choosed:before{content:'Enter'}#grid .card[data-target=\"\"].choosed:before{display:none}#grid .card:hover,#grid .card.open{border-color:#e5e5e5}#grid .card.open{margin-bottom:5px}#grid .card.section-new&gt;.card-heading:before,#grid .card.section-update&gt;.card-heading:before{display:block;content:' ';width:29px;height:9px;background:#f1a325 url(\"\") no-repeat 0 -10px;position:absolute;left:5px;top:5px;box-shadow:0 0 0 1px #fff;border-radius:2px;z-index:12}#grid .card.section-new&gt;.card-heading:before{width:18px;background-color:#ea644a;background-position:0 0}#grid .card-heading{transition:background-color .1s cubic-bezier(.175, .885, .32, 1);position:relative;padding:8px 8px 8px 50px}#grid .card-heading&gt;.icon{transition:background-color 0.1s cubic-bezier(0.175, 0.885, 0.32, 1), color 0.1s cubic-bezier(0.175, 0.885, 0.32, 1);border:1px solid #f1f1f1;background-size:contain;background-position:center;position:absolute;width:30px;height:30px;line-height:30px;border-radius:16px;text-align:center;left:10px;top:5px;z-index:10;font-style:normal}#grid .card-heading&gt;.icon.with-img{opacity:.8;filter:alpha(opacity=80);background-color:transparent !important}#grid .card-heading&gt;.icon.with-img:hover{opacity:1;filter:alpha(opacity=100)}#grid .card-heading&gt;.icon:before{position:relative}#grid .card-heading&gt;h5{transition:padding 0.1s cubic-bezier(0.175, 0.885, 0.32, 1), color 0.1s cubic-bezier(0.175, 0.885, 0.32, 1);line-height:15px;font-size:15px;font-weight:500;margin:0;padding:5px 0}#grid .card-heading&gt;h5&gt;a.name{color:#353535}#grid .card-heading&gt;small{font-size:12px;display:none;min-height:18px;white-space:normal;max-height:48px;position:relative}#grid .card-heading:hover&gt;.btn-toggle{right:0;width:64px}#grid .card-heading.hover{background-color:#f1f1f1}#grid .card-heading.hover&gt;.icon{background-color:#808080;color:#fff}#grid .card-content{height:0;padding:0 10px;transition:padding 0.1s cubic-bezier(0.175, 0.885, 0.32, 1), height 0.1s cubic-bezier(0.175, 0.885, 0.32, 1);overflow:hidden}#grid .card-content&gt;ul{list-style:none;padding:0;margin:0;position:relative}#grid .card-content&gt;ul:before{opacity:0;filter:alpha(opacity=0);z-index:5;position:absolute;display:block;content:' ';left:15px;top:-10px;bottom:14px;border-left:1px dotted #e5e5e5}#grid .card-content&gt;ul&gt;li{position:relative;padding:0}#grid .card-content&gt;ul&gt;li&gt;a{color:#353535;display:block;padding:5px 0 5px 40px;border-radius:4px}#grid .card-content&gt;ul&gt;li&gt;a&gt;.icon{display:inline-block;width:20px;text-align:center}#grid .card-content&gt;ul&gt;li&gt;a:hover,#grid .card-content&gt;ul&gt;li&gt;a:active,#grid .card-content&gt;ul&gt;li&gt;a:focus{text-decoration:none}#grid .card-content&gt;ul&gt;li&gt;a[href^='#search/']:before{font-family:ZenIcon;speak:none;font-size:14px;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:block;content:'\\e603';background-color:#e5e5e5;border-radius:12px;width:24px;height:24px;left:3px;top:2px;z-index:100;color:#808080;line-height:22px;text-align:center;position:absolute}#grid .card-content&gt;ul&gt;li.active&gt;a,#grid .card-content&gt;ul&gt;li&gt;a:hover{background-color:#f1f1f1;color:#353535}#grid .card-content&gt;ul&gt;li:before{transition:transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1), background-color 0.1s cubic-bezier(0.175, 0.885, 0.32, 1);position:absolute;display:block;content:' ';width:8px;height:8px;border-radius:4px;background-color:#e5e5e5;left:12px;top:10px;z-index:12}#grid .card-content&gt;ul&gt;li:after{position:absolute;display:block;content:' ';border-bottom:1px dotted #e5e5e5;width:20px;left:15px;top:14px;z-index:11}#grid .card-content&gt;ul&gt;li:hover:before,#grid .card-content&gt;ul&gt;li.active:before{transform:scale(1.25)}#grid .card-content&gt;ul[data-view=\"icons\"]:before,#grid .card-content&gt;ul[data-view=\"icons\"]:after{content:\" \";display:table}#grid .card-content&gt;ul[data-view=\"icons\"]:after{clear:both}#grid .card-content&gt;ul[data-view=\"icons\"]&gt;li{float:left}#grid .card-content&gt;ul[data-view=\"icons\"]&gt;li:before,#grid .card-content&gt;ul[data-view=\"icons\"]&gt;li:after{display:none}#grid .card-content&gt;ul[data-view=\"icons\"]&gt;li&gt;a{position:relative;text-indent:-999em;padding:5px;width:30px;height:30px;overflow:hidden}#grid .card-content&gt;ul[data-view=\"icons\"]&gt;li&gt;a:hover{transform:scale(2);z-index:1}#grid .card-content&gt;ul[data-view=\"icons\"]&gt;li&gt;a&gt;.icon{display:block;position:absolute;text-indent:0;width:100%;height:30px;line-height:30px;top:0;left:0}#grid .card-content&gt;ul[data-view=\"icons\"]&gt;li.control-icon-shaped&gt;a{width:60px}#grid .section-search{height:0;padding:0}#grid .section-search:before{content:\"没有找到，请更改关键字重新检索。\";display:block;position:absolute;padding:0 10px;top:0;right:0;height:30px;line-height:30px;background-color:#ffe5e0;color:#ea644a}#grid .card.section-preview-show .section-search:before{display:none}#grid .section-preview{background-color:#f1f1f1;height:0;padding:0}#grid .section-preview.icon-preview&gt;.icons{min-height:140px}#grid .section-preview.icon-preview&gt;.icons&gt;.icon{display:inline-block;margin:0 15px}#grid .section-preview.icon-preview&gt;h3{padding:0 10px}#grid .section-preview.icon-preview&gt;pre{margin-left:10px;max-width:400px}#grid .section-preview.show-shaped-icon .icon-10x{font-size:56px}#grid .section-preview.show-shaped-icon .icon-5x{font-size:42px}#grid .section-preview.show-shaped-icon .icon-2x{font-size:28px}#grid .card.open .card-heading&gt;.icon:after{content:' ';display:block;position:absolute;border-left:1px dotted #e5e5e5;height:999px;left:18px;top:36px}#grid .card.open .card-heading&gt;small{max-height:none}#grid .card.open .card-content{padding:10px;height:auto;border-top:1px dashed #f1f1f1;box-shadow:inset 0 10px 64px rgba(0,0,0,0.03)}#grid .card.open .card-content.section-search,#grid .card.open .card-content.section-preview{height:0;padding:0}#grid .card.open .card-content&gt;ul:before{opacity:1;filter:alpha(opacity=100)}#grid .card.open.without-topics .card-heading&gt;.icon:after{display:none}#grid .card.open.without-topics .card-content{padding:0;height:0;border-top:none}#grid .chapter[data-accent=\"blue\"] .chapter-heading{color:#03b8cf}#grid .chapter[data-accent=\"blue\"] .chapter-heading .icon{opacity:.8;filter:alpha(opacity=80)}#grid .chapter[data-accent=\"blue\"] .card.choosed{border-color:#ddf3f5;border-color:rgba(3,184,207,0.6);box-shadow:0 1px 6px rgba(3,184,207,0.3)}#grid .chapter[data-accent=\"blue\"] .card.choosed:before{background-color:#03b8cf}#grid .chapter[data-accent=\"blue\"] .card-heading&gt;.icon{color:#03b8cf;border-color:#ddf3f5}#grid .chapter[data-accent=\"blue\"] .card-heading&gt;.icon:hover{cursor:pointer}#grid .chapter[data-accent=\"blue\"] .card-heading&gt;.icon.text-icon{font-size:12px}#grid .chapter[data-accent=\"blue\"] .card-heading.hover{background-color:#ddf3f5}#grid .chapter[data-accent=\"blue\"] .card-heading.hover&gt;.icon{background-color:#03b8cf;border-color:#03b8cf;color:#fff}#grid .chapter[data-accent=\"blue\"] .card-heading.hover&gt;.icon:before{color:#fff}#grid .chapter[data-accent=\"blue\"] .card-heading:hover&gt;h5&gt;.name{color:#03b8cf}#grid .chapter[data-accent=\"blue\"] .card-heading&gt;h5&gt;.name:hover{cursor:pointer}#grid .chapter[data-accent=\"blue\"] .card-heading&gt;.btn-toggle{background-color:#ddf3f5;color:#03b8cf}#grid .chapter[data-accent=\"blue\"] .card-heading&gt;.btn-toggle:hover{color:#ddf3f5;background-color:#03b8cf;cursor:pointer}#grid .chapter[data-accent=\"blue\"] .card-content&gt;ul&gt;li:before{background-color:#ddf3f5}#grid .chapter[data-accent=\"blue\"] .card-content&gt;ul&gt;li:hover:before{background-color:#03b8cf}#grid .chapter[data-accent=\"blue\"] .card-content&gt;ul&gt;li:hover:after{border-color:#03b8cf}#grid .chapter[data-accent=\"blue\"] .card-content&gt;ul&gt;li&gt;a[href^='#search/']:before{background-color:#ddf3f5;color:#03b8cf}#grid .chapter[data-accent=\"blue\"] .card-content&gt;ul&gt;li.active&gt;a,#grid .chapter[data-accent=\"blue\"] .card-content&gt;ul&gt;li&gt;a:hover{background-color:#ddf3f5}#grid .chapter[data-accent=\"blue\"] .color-accent{color:#03b8cf}#grid .chapter[data-accent=\"blue\"] .card-content&gt;ul&gt;li&gt;a[target=\"_blank\"]:after,#grid .chapter[data-accent=\"blue\"] .card[data-target=\"external\"]&gt;.card-heading&gt;h5&gt;a:after{display:inline-block;display:none\\0;margin-left:5px;font-family:ZenIcon;speak:none;font-size:14px;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:'\\e684';opacity:0;filter:alpha(opacity=0);transform:scale(.5);left:-10px;position:relative;transition:transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1), opacity 0.2s cubic-bezier(0.175, 0.885, 0.32, 1), left 0.2s cubic-bezier(0.175, 0.885, 0.32, 1)}#grid .chapter[data-accent=\"blue\"] .card-content&gt;ul&gt;li&gt;a[target=\"_blank\"]:hover:after,#grid .chapter[data-accent=\"blue\"] .card[data-target=\"external\"]&gt;.card-heading.hover&gt;h5&gt;a:after{left:0;opacity:1;filter:alpha(opacity=100);transform:scale(1)}#grid .chapter[data-accent=\"primary\"] .chapter-heading{color:#039BE5}#grid .chapter[data-accent=\"primary\"] .chapter-heading .icon{opacity:.8;filter:alpha(opacity=80)}#grid .chapter[data-accent=\"primary\"] .card.choosed{border-color:#e1f5fe;border-color:rgba(3,155,229,0.6);box-shadow:0 1px 6px rgba(3,155,229,0.3)}#grid .chapter[data-accent=\"primary\"] .card.choosed:before{background-color:#039BE5}#grid .chapter[data-accent=\"primary\"] .card-heading&gt;.icon{color:#039BE5;border-color:#e1f5fe}#grid .chapter[data-accent=\"primary\"] .card-heading&gt;.icon:hover{cursor:pointer}#grid .chapter[data-accent=\"primary\"] .card-heading&gt;.icon.text-icon{font-size:12px}#grid .chapter[data-accent=\"primary\"] .card-heading.hover{background-color:#e1f5fe}#grid .chapter[data-accent=\"primary\"] .card-heading.hover&gt;.icon{background-color:#039BE5;border-color:#039BE5;color:#fff}#grid .chapter[data-accent=\"primary\"] .card-heading.hover&gt;.icon:before{color:#fff}#grid .chapter[data-accent=\"primary\"] .card-heading:hover&gt;h5&gt;.name{color:#039BE5}#grid .chapter[data-accent=\"primary\"] .card-heading&gt;h5&gt;.name:hover{cursor:pointer}#grid .chapter[data-accent=\"primary\"] .card-heading&gt;.btn-toggle{background-color:#e1f5fe;color:#039BE5}#grid .chapter[data-accent=\"primary\"] .card-heading&gt;.btn-toggle:hover{color:#e1f5fe;background-color:#039BE5;cursor:pointer}#grid .chapter[data-accent=\"primary\"] .card-content&gt;ul&gt;li:before{background-color:#e1f5fe}#grid .chapter[data-accent=\"primary\"] .card-content&gt;ul&gt;li:hover:before{background-color:#039BE5}#grid .chapter[data-accent=\"primary\"] .card-content&gt;ul&gt;li:hover:after{border-color:#039BE5}#grid .chapter[data-accent=\"primary\"] .card-content&gt;ul&gt;li&gt;a[href^='#search/']:before{background-color:#e1f5fe;color:#039BE5}#grid .chapter[data-accent=\"primary\"] .card-content&gt;ul&gt;li.active&gt;a,#grid .chapter[data-accent=\"primary\"] .card-content&gt;ul&gt;li&gt;a:hover{background-color:#e1f5fe}#grid .chapter[data-accent=\"primary\"] .color-accent{color:#039BE5}#grid .chapter[data-accent=\"primary\"] .card-content&gt;ul&gt;li&gt;a[target=\"_blank\"]:after,#grid .chapter[data-accent=\"primary\"] .card[data-target=\"external\"]&gt;.card-heading&gt;h5&gt;a:after{display:inline-block;display:none\\0;margin-left:5px;font-family:ZenIcon;speak:none;font-size:14px;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:'\\e684';opacity:0;filter:alpha(opacity=0);transform:scale(.5);left:-10px;position:relative;transition:transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1), opacity 0.2s cubic-bezier(0.175, 0.885, 0.32, 1), left 0.2s cubic-bezier(0.175, 0.885, 0.32, 1)}#grid .chapter[data-accent=\"primary\"] .card-content&gt;ul&gt;li&gt;a[target=\"_blank\"]:hover:after,#grid .chapter[data-accent=\"primary\"] .card[data-target=\"external\"]&gt;.card-heading.hover&gt;h5&gt;a:after{left:0;opacity:1;filter:alpha(opacity=100);transform:scale(1)}#grid .chapter[data-accent=\"yellow\"] .chapter-heading{color:#f1a325}#grid .chapter[data-accent=\"yellow\"] .chapter-heading .icon{opacity:.8;filter:alpha(opacity=80)}#grid .chapter[data-accent=\"yellow\"] .card.choosed{border-color:#fff0d5;border-color:rgba(241,163,37,0.6);box-shadow:0 1px 6px rgba(241,163,37,0.3)}#grid .chapter[data-accent=\"yellow\"] .card.choosed:before{background-color:#f1a325}#grid .chapter[data-accent=\"yellow\"] .card-heading&gt;.icon{color:#f1a325;border-color:#fff0d5}#grid .chapter[data-accent=\"yellow\"] .card-heading&gt;.icon:hover{cursor:pointer}#grid .chapter[data-accent=\"yellow\"] .card-heading&gt;.icon.text-icon{font-size:12px}#grid .chapter[data-accent=\"yellow\"] .card-heading.hover{background-color:#fff0d5}#grid .chapter[data-accent=\"yellow\"] .card-heading.hover&gt;.icon{background-color:#f1a325;border-color:#f1a325;color:#fff}#grid .chapter[data-accent=\"yellow\"] .card-heading.hover&gt;.icon:before{color:#fff}#grid .chapter[data-accent=\"yellow\"] .card-heading:hover&gt;h5&gt;.name{color:#f1a325}#grid .chapter[data-accent=\"yellow\"] .card-heading&gt;h5&gt;.name:hover{cursor:pointer}#grid .chapter[data-accent=\"yellow\"] .card-heading&gt;.btn-toggle{background-color:#fff0d5;color:#f1a325}#grid .chapter[data-accent=\"yellow\"] .card-heading&gt;.btn-toggle:hover{color:#fff0d5;background-color:#f1a325;cursor:pointer}#grid .chapter[data-accent=\"yellow\"] .card-content&gt;ul&gt;li:before{background-color:#fff0d5}#grid .chapter[data-accent=\"yellow\"] .card-content&gt;ul&gt;li:hover:before{background-color:#f1a325}#grid .chapter[data-accent=\"yellow\"] .card-content&gt;ul&gt;li:hover:after{border-color:#f1a325}#grid .chapter[data-accent=\"yellow\"] .card-content&gt;ul&gt;li&gt;a[href^='#search/']:before{background-color:#fff0d5;color:#f1a325}#grid .chapter[data-accent=\"yellow\"] .card-content&gt;ul&gt;li.active&gt;a,#grid .chapter[data-accent=\"yellow\"] .card-content&gt;ul&gt;li&gt;a:hover{background-color:#fff0d5}#grid .chapter[data-accent=\"yellow\"] .color-accent{color:#f1a325}#grid .chapter[data-accent=\"yellow\"] .card-content&gt;ul&gt;li&gt;a[target=\"_blank\"]:after,#grid .chapter[data-accent=\"yellow\"] .card[data-target=\"external\"]&gt;.card-heading&gt;h5&gt;a:after{display:inline-block;display:none\\0;margin-left:5px;font-family:ZenIcon;speak:none;font-size:14px;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:'\\e684';opacity:0;filter:alpha(opacity=0);transform:scale(.5);left:-10px;position:relative;transition:transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1), opacity 0.2s cubic-bezier(0.175, 0.885, 0.32, 1), left 0.2s cubic-bezier(0.175, 0.885, 0.32, 1)}#grid .chapter[data-accent=\"yellow\"] .card-content&gt;ul&gt;li&gt;a[target=\"_blank\"]:hover:after,#grid .chapter[data-accent=\"yellow\"] .card[data-target=\"external\"]&gt;.card-heading.hover&gt;h5&gt;a:after{left:0;opacity:1;filter:alpha(opacity=100);transform:scale(1)}#grid .chapter[data-accent=\"green\"] .chapter-heading{color:#38b03f}#grid .chapter[data-accent=\"green\"] .chapter-heading .icon{opacity:.8;filter:alpha(opacity=80)}#grid .chapter[data-accent=\"green\"] .card.choosed{border-color:#ddf4df;border-color:rgba(56,176,63,0.6);box-shadow:0 1px 6px rgba(56,176,63,0.3)}#grid .chapter[data-accent=\"green\"] .card.choosed:before{background-color:#38b03f}#grid .chapter[data-accent=\"green\"] .card-heading&gt;.icon{color:#38b03f;border-color:#ddf4df}#grid .chapter[data-accent=\"green\"] .card-heading&gt;.icon:hover{cursor:pointer}#grid .chapter[data-accent=\"green\"] .card-heading&gt;.icon.text-icon{font-size:12px}#grid .chapter[data-accent=\"green\"] .card-heading.hover{background-color:#ddf4df}#grid .chapter[data-accent=\"green\"] .card-heading.hover&gt;.icon{background-color:#38b03f;border-color:#38b03f;color:#fff}#grid .chapter[data-accent=\"green\"] .card-heading.hover&gt;.icon:before{color:#fff}#grid .chapter[data-accent=\"green\"] .card-heading:hover&gt;h5&gt;.name{color:#38b03f}#grid .chapter[data-accent=\"green\"] .card-heading&gt;h5&gt;.name:hover{cursor:pointer}#grid .chapter[data-accent=\"green\"] .card-heading&gt;.btn-toggle{background-color:#ddf4df;color:#38b03f}#grid .chapter[data-accent=\"green\"] .card-heading&gt;.btn-toggle:hover{color:#ddf4df;background-color:#38b03f;cursor:pointer}#grid .chapter[data-accent=\"green\"] .card-content&gt;ul&gt;li:before{background-color:#ddf4df}#grid .chapter[data-accent=\"green\"] .card-content&gt;ul&gt;li:hover:before{background-color:#38b03f}#grid .chapter[data-accent=\"green\"] .card-content&gt;ul&gt;li:hover:after{border-color:#38b03f}#grid .chapter[data-accent=\"green\"] .card-content&gt;ul&gt;li&gt;a[href^='#search/']:before{background-color:#ddf4df;color:#38b03f}#grid .chapter[data-accent=\"green\"] .card-content&gt;ul&gt;li.active&gt;a,#grid .chapter[data-accent=\"green\"] .card-content&gt;ul&gt;li&gt;a:hover{background-color:#ddf4df}#grid .chapter[data-accent=\"green\"] .color-accent{color:#38b03f}#grid .chapter[data-accent=\"green\"] .card-content&gt;ul&gt;li&gt;a[target=\"_blank\"]:after,#grid .chapter[data-accent=\"green\"] .card[data-target=\"external\"]&gt;.card-heading&gt;h5&gt;a:after{display:inline-block;display:none\\0;margin-left:5px;font-family:ZenIcon;speak:none;font-size:14px;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:'\\e684';opacity:0;filter:alpha(opacity=0);transform:scale(.5);left:-10px;position:relative;transition:transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1), opacity 0.2s cubic-bezier(0.175, 0.885, 0.32, 1), left 0.2s cubic-bezier(0.175, 0.885, 0.32, 1)}#grid .chapter[data-accent=\"green\"] .card-content&gt;ul&gt;li&gt;a[target=\"_blank\"]:hover:after,#grid .chapter[data-accent=\"green\"] .card[data-target=\"external\"]&gt;.card-heading.hover&gt;h5&gt;a:after{left:0;opacity:1;filter:alpha(opacity=100);transform:scale(1)}#grid .chapter[data-accent=\"red\"] .chapter-heading{color:#ea644a}#grid .chapter[data-accent=\"red\"] .chapter-heading .icon{opacity:.8;filter:alpha(opacity=80)}#grid .chapter[data-accent=\"red\"] .card.choosed{border-color:#ffe5e0;border-color:rgba(234,100,74,0.6);box-shadow:0 1px 6px rgba(234,100,74,0.3)}#grid .chapter[data-accent=\"red\"] .card.choosed:before{background-color:#ea644a}#grid .chapter[data-accent=\"red\"] .card-heading&gt;.icon{color:#ea644a;border-color:#ffe5e0}#grid .chapter[data-accent=\"red\"] .card-heading&gt;.icon:hover{cursor:pointer}#grid .chapter[data-accent=\"red\"] .card-heading&gt;.icon.text-icon{font-size:12px}#grid .chapter[data-accent=\"red\"] .card-heading.hover{background-color:#ffe5e0}#grid .chapter[data-accent=\"red\"] .card-heading.hover&gt;.icon{background-color:#ea644a;border-color:#ea644a;color:#fff}#grid .chapter[data-accent=\"red\"] .card-heading.hover&gt;.icon:before{color:#fff}#grid .chapter[data-accent=\"red\"] .card-heading:hover&gt;h5&gt;.name{color:#ea644a}#grid .chapter[data-accent=\"red\"] .card-heading&gt;h5&gt;.name:hover{cursor:pointer}#grid .chapter[data-accent=\"red\"] .card-heading&gt;.btn-toggle{background-color:#ffe5e0;color:#ea644a}#grid .chapter[data-accent=\"red\"] .card-heading&gt;.btn-toggle:hover{color:#ffe5e0;background-color:#ea644a;cursor:pointer}#grid .chapter[data-accent=\"red\"] .card-content&gt;ul&gt;li:before{background-color:#ffe5e0}#grid .chapter[data-accent=\"red\"] .card-content&gt;ul&gt;li:hover:before{background-color:#ea644a}#grid .chapter[data-accent=\"red\"] .card-content&gt;ul&gt;li:hover:after{border-color:#ea644a}#grid .chapter[data-accent=\"red\"] .card-content&gt;ul&gt;li&gt;a[href^='#search/']:before{background-color:#ffe5e0;color:#ea644a}#grid .chapter[data-accent=\"red\"] .card-content&gt;ul&gt;li.active&gt;a,#grid .chapter[data-accent=\"red\"] .card-content&gt;ul&gt;li&gt;a:hover{background-color:#ffe5e0}#grid .chapter[data-accent=\"red\"] .color-accent{color:#ea644a}#grid .chapter[data-accent=\"red\"] .card-content&gt;ul&gt;li&gt;a[target=\"_blank\"]:after,#grid .chapter[data-accent=\"red\"] .card[data-target=\"external\"]&gt;.card-heading&gt;h5&gt;a:after{display:inline-block;display:none\\0;margin-left:5px;font-family:ZenIcon;speak:none;font-size:14px;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:'\\e684';opacity:0;filter:alpha(opacity=0);transform:scale(.5);left:-10px;position:relative;transition:transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1), opacity 0.2s cubic-bezier(0.175, 0.885, 0.32, 1), left 0.2s cubic-bezier(0.175, 0.885, 0.32, 1)}#grid .chapter[data-accent=\"red\"] .card-content&gt;ul&gt;li&gt;a[target=\"_blank\"]:hover:after,#grid .chapter[data-accent=\"red\"] .card[data-target=\"external\"]&gt;.card-heading.hover&gt;h5&gt;a:after{left:0;opacity:1;filter:alpha(opacity=100);transform:scale(1)}#grid .chapter[data-accent=\"brown\"] .chapter-heading{color:#bd7b46}#grid .chapter[data-accent=\"brown\"] .chapter-heading .icon{opacity:.8;filter:alpha(opacity=80)}#grid .chapter[data-accent=\"brown\"] .card.choosed{border-color:#f7ebe1;border-color:rgba(189,123,70,0.6);box-shadow:0 1px 6px rgba(189,123,70,0.3)}#grid .chapter[data-accent=\"brown\"] .card.choosed:before{background-color:#bd7b46}#grid .chapter[data-accent=\"brown\"] .card-heading&gt;.icon{color:#bd7b46;border-color:#f7ebe1}#grid .chapter[data-accent=\"brown\"] .card-heading&gt;.icon:hover{cursor:pointer}#grid .chapter[data-accent=\"brown\"] .card-heading&gt;.icon.text-icon{font-size:12px}#grid .chapter[data-accent=\"brown\"] .card-heading.hover{background-color:#f7ebe1}#grid .chapter[data-accent=\"brown\"] .card-heading.hover&gt;.icon{background-color:#bd7b46;border-color:#bd7b46;color:#fff}#grid .chapter[data-accent=\"brown\"] .card-heading.hover&gt;.icon:before{color:#fff}#grid .chapter[data-accent=\"brown\"] .card-heading:hover&gt;h5&gt;.name{color:#bd7b46}#grid .chapter[data-accent=\"brown\"] .card-heading&gt;h5&gt;.name:hover{cursor:pointer}#grid .chapter[data-accent=\"brown\"] .card-heading&gt;.btn-toggle{background-color:#f7ebe1;color:#bd7b46}#grid .chapter[data-accent=\"brown\"] .card-heading&gt;.btn-toggle:hover{color:#f7ebe1;background-color:#bd7b46;cursor:pointer}#grid .chapter[data-accent=\"brown\"] .card-content&gt;ul&gt;li:before{background-color:#f7ebe1}#grid .chapter[data-accent=\"brown\"] .card-content&gt;ul&gt;li:hover:before{background-color:#bd7b46}#grid .chapter[data-accent=\"brown\"] .card-content&gt;ul&gt;li:hover:after{border-color:#bd7b46}#grid .chapter[data-accent=\"brown\"] .card-content&gt;ul&gt;li&gt;a[href^='#search/']:before{background-color:#f7ebe1;color:#bd7b46}#grid .chapter[data-accent=\"brown\"] .card-content&gt;ul&gt;li.active&gt;a,#grid .chapter[data-accent=\"brown\"] .card-content&gt;ul&gt;li&gt;a:hover{background-color:#f7ebe1}#grid .chapter[data-accent=\"brown\"] .color-accent{color:#bd7b46}#grid .chapter[data-ac</span><span class="str">cent=\"brown\"] .card-content&gt;ul&gt;li&gt;a[target=\"_blank\"]:after,#grid .chapter[data-accent=\"brown\"] .card[data-target=\"external\"]&gt;.card-heading&gt;h5&gt;a:after{display:inline-block;display:none\\0;margin-left:5px;font-family:ZenIcon;speak:none;font-size:14px;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:'\\e684';opacity:0;filter:alpha(opacity=0);transform:scale(.5);left:-10px;position:relative;transition:transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1), opacity 0.2s cubic-bezier(0.175, 0.885, 0.32, 1), left 0.2s cubic-bezier(0.175, 0.885, 0.32, 1)}#grid .chapter[data-accent=\"brown\"] .card-content&gt;ul&gt;li&gt;a[target=\"_blank\"]:hover:after,#grid .chapter[data-accent=\"brown\"] .card[data-target=\"external\"]&gt;.card-heading.hover&gt;h5&gt;a:after{left:0;opacity:1;filter:alpha(opacity=100);transform:scale(1)}#grid .chapter[data-accent=\"purple\"] .chapter-heading{color:#8666b8}#grid .chapter[data-accent=\"purple\"] .chapter-heading .icon{opacity:.8;filter:alpha(opacity=80)}#grid .chapter[data-accent=\"purple\"] .card.choosed{border-color:#f5eeff;border-color:rgba(134,102,184,0.6);box-shadow:0 1px 6px rgba(134,102,184,0.3)}#grid .chapter[data-accent=\"purple\"] .card.choosed:before{background-color:#8666b8}#grid .chapter[data-accent=\"purple\"] .card-heading&gt;.icon{color:#8666b8;border-color:#f5eeff}#grid .chapter[data-accent=\"purple\"] .card-heading&gt;.icon:hover{cursor:pointer}#grid .chapter[data-accent=\"purple\"] .card-heading&gt;.icon.text-icon{font-size:12px}#grid .chapter[data-accent=\"purple\"] .card-heading.hover{background-color:#f5eeff}#grid .chapter[data-accent=\"purple\"] .card-heading.hover&gt;.icon{background-color:#8666b8;border-color:#8666b8;color:#fff}#grid .chapter[data-accent=\"purple\"] .card-heading.hover&gt;.icon:before{color:#fff}#grid .chapter[data-accent=\"purple\"] .card-heading:hover&gt;h5&gt;.name{color:#8666b8}#grid .chapter[data-accent=\"purple\"] .card-heading&gt;h5&gt;.name:hover{cursor:pointer}#grid .chapter[data-accent=\"purple\"] .card-heading&gt;.btn-toggle{background-color:#f5eeff;color:#8666b8}#grid .chapter[data-accent=\"purple\"] .card-heading&gt;.btn-toggle:hover{color:#f5eeff;background-color:#8666b8;cursor:pointer}#grid .chapter[data-accent=\"purple\"] .card-content&gt;ul&gt;li:before{background-color:#f5eeff}#grid .chapter[data-accent=\"purple\"] .card-content&gt;ul&gt;li:hover:before{background-color:#8666b8}#grid .chapter[data-accent=\"purple\"] .card-content&gt;ul&gt;li:hover:after{border-color:#8666b8}#grid .chapter[data-accent=\"purple\"] .card-content&gt;ul&gt;li&gt;a[href^='#search/']:before{background-color:#f5eeff;color:#8666b8}#grid .chapter[data-accent=\"purple\"] .card-content&gt;ul&gt;li.active&gt;a,#grid .chapter[data-accent=\"purple\"] .card-content&gt;ul&gt;li&gt;a:hover{background-color:#f5eeff}#grid .chapter[data-accent=\"purple\"] .color-accent{color:#8666b8}#grid .chapter[data-accent=\"purple\"] .card-content&gt;ul&gt;li&gt;a[target=\"_blank\"]:after,#grid .chapter[data-accent=\"purple\"] .card[data-target=\"external\"]&gt;.card-heading&gt;h5&gt;a:after{display:inline-block;display:none\\0;margin-left:5px;font-family:ZenIcon;speak:none;font-size:14px;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:'\\e684';opacity:0;filter:alpha(opacity=0);transform:scale(.5);left:-10px;position:relative;transition:transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1), opacity 0.2s cubic-bezier(0.175, 0.885, 0.32, 1), left 0.2s cubic-bezier(0.175, 0.885, 0.32, 1)}#grid .chapter[data-accent=\"purple\"] .card-content&gt;ul&gt;li&gt;a[target=\"_blank\"]:hover:after,#grid .chapter[data-accent=\"purple\"] .card[data-target=\"external\"]&gt;.card-heading.hover&gt;h5&gt;a:after{left:0;opacity:1;filter:alpha(opacity=100);transform:scale(1)}body.input-query-focus #grid .card.choosed:before{right:0}body.query-enabled #grid&gt;.container&gt;.row+.row{padding-top:0;border-top:none}body.query-enabled[data-query='icons'] #section-control-icons .card-heading&gt;.icon:before{content:'\\e603'}body.query-enabled[data-query='icons'] #grid .card.open.section-preview-show .card-content.section-preview,body.query-enabled[data-query='icons'] #grid .card.open .card-content.section-search{height:auto;padding:10px}body.query-enabled[data-query='icons'] #grid .card.open.section-preview-show .section-preview.icon-preview{padding:20px 10px 10px}@media (min-width:768px){body.query-enabled #grid[data-show-col='1']&gt;.container&gt;.row&gt;.col{float:none;width:100%;margin:0 auto}body.query-enabled #grid[data-show-col='1']&gt;.container&gt;.row&gt;.col.hide{width:0}}@media (min-width:992px){body.query-enabled #grid[data-show-col='1']&gt;.container&gt;.row&gt;.col{float:none;max-width:780px;margin:0 auto}body.query-enabled #grid[data-show-col='1']&gt;.container&gt;.row&gt;.col.hide{width:0}body.query-enabled #grid[data-show-col='2']&gt;.container&gt;.row&gt;.col{width:50%}body.query-enabled #grid[data-show-col='2']&gt;.container&gt;.row&gt;.col.hide{width:0}body.query-enabled #grid[data-show-col='3']&gt;.container&gt;.row&gt;.col{width:33.33333333%}body.query-enabled #grid[data-show-col='3']&gt;.container&gt;.row&gt;.col.hide{width:0}body.query-enabled #grid[data-show-col='4']&gt;.container&gt;.row&gt;.col{width:25%}body.query-enabled #grid[data-show-col='4']&gt;.container&gt;.row&gt;.col.hide{width:0}}#page{position:fixed;background-color:#fff;left:0;right:0;bottom:0;top:60px;z-index:1000;display:none;overflow-y:auto}#page .loader{transition:none}#pageHeader{background-color:#f1f1f1;border-bottom:1px solid #e5e5e5;position:relative;padding:0;height:60px}#pageHeader&gt;.container{position:relative;padding:12px 20px 12px 54px}#pageHeader&gt;.container&gt;.icon{position:absolute;width:36px;height:36px;line-height:36px;border-radius:18px;text-align:center;left:6px;top:12px;z-index:10;font-style:normal;color:#808080;background-color:#e5e5e5}#pageHeader&gt;.container&gt;h2{padding:10px 0;line-height:16px;font-size:20px;margin:0}#pageHeader&gt;.container&gt;h2&gt;a.name{color:#353535}#pageHeader&gt;.container&gt;h2&gt;a.name:hover{text-decoration:none;color:#353535;cursor:normal}#pageHeader&gt;.path-max-btn{right:48px;width:36px}#pageCloseBtn{position:absolute;right:15px;top:5px;width:48px;height:48px;border-radius:4px}#pageReloadBtn{position:absolute;right:70px;top:5px;width:48px;height:48px;color:#808080;display:none}#pageReloadBtn:hover{color:#353535}#pageBody{padding:15px 0;position:absolute;top:60px;bottom:0;width:100%;overflow-y:auto}#pageAttrs{padding:0 0 10px 23px;margin:0 0 20px 21px;border-bottom:4px double #f1f1f1}#pageAttrs .badge{float:left;background-color:#f1f1f1;margin-right:10px;padding:6px 10px;min-width:40px;text-align:center;border-radius:4px;opacity:.8;filter:alpha(opacity=80);line-height:20px;transition:all .2s cubic-bezier(.175, .885, .32, 1)}#pageAttrs .badge.btn{border:none}#pageAttrs .badge[data-toggle='dropdown']{position:relative}#pageAttrs .badge[data-toggle='dropdown']:before{content:' ';display:block;position:absolute;right:1px;bottom:1px;width:0;height:0;border-style:solid;border-width:0 0 6px 6px;border-color:transparent transparent #ccc transparent;transition:border .2s cubic-bezier(.175, .885, .32, 1);border-bottom-color:rgba(0,0,0,0.15)}#pageAttrs .badge[data-toggle='dropdown']:hover:before{border-bottom-color:rgba(0,0,0,0.35)}#pageAttrs .badge.pull-right{margin-right:0;margin-left:10px}#pageAttrs .badge:hover{opacity:1;filter:alpha(opacity=100);background-color:#e5e5e5;text-decoration:none}#pageAttrs .badge.badge-zui{background-color:#e1f5fe;color:#039BE5}#pageAttrs .badge.badge-zui:hover{background-color:#c8edfd}#pageAttrs .badge.badge-lite{background-color:#ddf3f5;color:#03b8cf}#pageAttrs .badge.badge-lite:hover,#pageAttrs .badge.badge-lite:active,#pageAttrs .badge.badge-lite:focus{background-color:#c9ecef}#pageAttrs .badge.badge-lib{background-color:#ddf4df;color:#38b03f}#pageAttrs .badge.badge-lib:hover{background-color:#caeecd}#pageAttrs .badge.badge-party{background-color:#ffe5e0;color:#ea644a}#pageAttrs .badge.badge-party:hover{background-color:#ffd0c6}#pageAttrs .badge.badge-bootstrap{background-color:#f5eeff;color:#8666b8}#pageAttrs .badge.badge-bootstrap:hover{background-color:#e6d5ff}#pageAttrs .badge.badge-custom{background-color:#f7ebe1;color:#bd7b46}#pageAttrs .badge.badge-custom:hover{background-color:#f2decd}#pageAttrs .badge.badge-code{background-color:#e1f5fe;color:#039BE5}#pageAttrs .badge.badge-code:hover{background-color:#c8edfd}#pageAttrs .badge.badge-code:hover:before{border-bottom-color:#039BE5}#pageAttrs .badge.badge-code[data-type=\"has-source-bundles\"] .badge-code-pkgs{display:inline-block;margin-left:8px}#pageAttrs .dropdown-menu{overflow:hidden;padding-top:0}#pageAttrs .dropdown-menu&gt;li&gt;a{padding-left:30px;padding-right:10px;position:relative}#pageAttrs .dropdown-menu&gt;li&gt;a:before{position:absolute;display:block;left:15px;top:9px;border-radius:4px;content:' ';width:8px;height:8px;background:#ddd}#pageAttrs .dropdown-header{color:#999;padding-left:15px;padding-right:15px}#pageAttrs .dropdown-header.primary-header{color:#fff;padding-top:8px;padding-bottom:8px;background-color:#e1f5fe;color:#039BE5}#pageAttrs .dropdown-header.primary-header[data-type=\"source\"]{color:#03b8cf}#pageAttrs .dropdown-header.primary-header[data-type=\"bundles\"]{color:#38b03f}@media (max-width:767px){#pageAttrs{margin:0 0 10px 0;padding-left:0;padding-bottom:10px}#pageAttrs&gt;.pull-right{margin:0 0 5px 5px !important}#pageAttrs .badge{margin-right:5px;margin-left:0;padding:5px;min-width:30px}#pageAttrs&gt;.badge{margin-bottom:5px}}#pageContent{padding-left:44px;position:relative}#pageContent:before{position:absolute;content:' ';display:block;border-left:1px dotted #e5e5e5;left:20px;top:-250px;bottom:0}#pageContent&gt;section{position:relative}#pageContent&gt;section:before{position:absolute;content:' ';display:block;border-left:1px dotted transparent;left:-24px;top:28px;bottom:-25px}#pageContent&gt;section:last-child:before{bottom:0}#pageContent&gt;section&gt;header{position:relative;padding-top:20px;padding-bottom:10px}#pageContent&gt;section&gt;header&gt;h3{margin:0;display:inline-block;cursor:pointer}#pageContent&gt;section&gt;header&gt;h3:before,#pageContent&gt;section&gt;header&gt;h3:after{position:absolute;content:' ';left:-24px;top:25px;transition:background-color .2s cubic-bezier(.175, .885, .32, 1)}#pageContent&gt;section&gt;header&gt;h3:before{display:none;width:1px;height:7px}#pageContent&gt;section&gt;header&gt;h3:after{width:7px;height:1px;top:28px;left:-27px}#pageContent&gt;section&gt;header:before{position:absolute;content:' ';display:block;left:-29px;top:23px;width:11px;height:11px;background-color:#ddd;border-radius:5px;transition:background-color .2s cubic-bezier(.175, .885, .32, 1)}#pageContent&gt;section&gt;header:after{position:absolute;content:' ';display:block;width:16px;border-bottom:1px dotted #e5e5e5;left:-18px;top:28px}#pageContent&gt;section.hover&gt;header h3:before,#pageContent&gt;section.hover&gt;header h3:after{background-color:#fff}#pageContent&gt;section.hover.collapsed&gt;header&gt;h3:before{display:block}#pageContent&gt;section&gt;article{height:auto;transition:opacity 0.2s cubic-bezier(0.175, 0.885, 0.32, 1), height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1)}#pageContent&gt;section.collapsed:before{display:none}#pageContent&gt;section.collapsed&gt;article{height:0;opacity:0;filter:alpha(opacity=0);overflow:hidden}#pageContent&gt;article&gt;.alert,#pageContent&gt;section&gt;article&gt;.alert{border:none;border-radius:0}#pageContent&gt;article&gt;.alert code,#pageContent&gt;section&gt;article&gt;.alert code{background-color:rgba(255,255,255,0.2);border-color:rgba(0,0,0,0.1)}#pageTogger{position:absolute;bottom:-36px;left:15px;width:19px;height:19px;padding:0;border-radius:10px;background-color:#fff;color:#ddd;z-index:10;border:1px solid #e5e5e5;outline:none}#pageTogger:before,#pageTogger:after{transition:background-color .4s cubic-bezier(.175, .885, .32, 1);position:absolute;display:block;content:' ';left:4px;top:4px;background-color:#ddd}#pageTogger:before{height:9px;width:1px;left:8px;display:none}#pageTogger:after{width:9px;top:8px;height:1px}@media (max-width:767px){#pageTogger{display:none}}#page.page-collapsed #pageTogger:before{display:block}#page.loading #pageTogger{display:none}#page.loading #pageContent{opacity:0;filter:alpha(opacity=0)}body.compact-mode #compactTogger{display:inline-block;margin-left:8px;transition:top .2s cubic-bezier(.175, .885, .32, 1);opacity:0;filter:alpha(opacity=0);position:relative;top:-60px}body.compact-mode #heading{transition:height .2s cubic-bezier(.175, .885, .32, 1)}body.compact-mode #search{transition:opacity .2s cubic-bezier(.175, .885, .32, 1);opacity:0;filter:alpha(opacity=0);padding:0;position:absolute;left:180px;top:12px;z-index:1050;max-width:500px;right:150px}body.compact-mode #searchInput{border-width:1px;height:36px;font-size:14px}body.compact-mode #searchForm{opacity:0;filter:alpha(opacity=0);transform:scale(.75)}body.compact-mode #searchForm&gt;.icon{top:10px}body.compact-mode #searchHelpBtn{width:30px;height:30px;line-height:34px;top:3px;right:3px}body.compact-mode #header{z-index:1010;position:fixed;top:0;left:0;right:0;height:483px}body.compact-mode #headContainer&gt;.container{position:relative}body.compact-mode #grid{transition:margin-top .2s cubic-bezier(.175, .885, .32, 1);margin-top:503px}body.compact-mode #ad{opacity:0}body.compact-mode.compact-mode-in #navbar{padding-top:10px}body.compact-mode.compact-mode-in #navbar .navbar-nav&gt;li&gt;a{width:40px;padding:10px;text-align:center}body.compact-mode.compact-mode-in #navbar .navbar-nav&gt;li&gt;a&gt;span{display:none}body.compact-mode.compact-mode-in #navbar .navbar-collapse.in .navbar-nav&gt;li&gt;a,body.compact-mode.compact-mode-in #navbar .navbar-collapse.collapsing .navbar-nav&gt;li&gt;a{padding:10px 15px;width:auto;text-align:left}body.compact-mode.compact-mode-in #navbar .navbar-collapse.in .navbar-nav&gt;li&gt;a&gt;span,body.compact-mode.compact-mode-in #navbar .navbar-collapse.collapsing .navbar-nav&gt;li&gt;a&gt;span{display:inline}body.compact-mode.compact-mode-in #navDownloadLink{opacity:1;filter:alpha(opacity=100)}body.compact-mode.compact-mode-in #compactTogger{opacity:1;filter:alpha(opacity=100);top:2px}body.compact-mode.compact-mode-in #header{height:60px;padding:0}body.compact-mode.compact-mode-in #heading{opacity:0;filter:alpha(opacity=0);height:0}body.compact-mode.compact-mode-in #search{opacity:1;filter:alpha(opacity=100)}body.compact-mode.compact-mode-in #searchForm{opacity:1;filter:alpha(opacity=100);transform:scale(1)}body.compact-mode.compact-mode-in #grid{margin-top:70px}body.compact-mode.compact-mode-in #ad{display:none}body.page-show{overflow:hidden}body.page-show #header{transition:background-color .4s cubic-bezier(.175, .885, .32, 1);box-shadow:none !important}body.page-show #compactTogger:before{content:'\\e60b'}body.page-show #page{opacity:0;filter:alpha(opacity=0);transform:scale(.8);display:block}body.page-show #grid,body.page-show #page{transition:opacity 0.2s cubic-bezier(0.175, 0.885, 0.32, 1), transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1), top 0.2s cubic-bezier(0.175, 0.885, 0.32, 1)}body.page-show.page-show-in #page{opacity:1;filter:alpha(opacity=100);transform:scale(1)}body.page-show.page-show-in #grid{opacity:0;filter:alpha(opacity=0);transform:scale(.8);top:100px}body.page-show[data-page-accent=\"blue\"] #pageHeader&gt;.wrapper&gt;.icon{background-color:#03b8cf;color:#fff}body.page-show[data-page-accent=\"blue\"] #pageContent&gt;section&gt;header:before{background-color:#ddf3f5}body.page-show[data-page-accent=\"blue\"] #pageContent&gt;section.hover&gt;header:before{background-color:#03b8cf}body.page-show[data-page-accent=\"blue\"] #pageContent&gt;section.hover&gt;header:after{border-color:#03b8cf}body.page-show[data-page-accent=\"blue\"] #pageContent&gt;section.hover&gt;header&gt;h3{color:#03b8cf}body.page-show[data-page-accent=\"blue\"] #pageContent&gt;section.hover:before{border-color:#03b8cf}body.page-show[data-page-accent=\"blue\"] #pageTogger:hover{border-color:#03b8cf}body.page-show[data-page-accent=\"blue\"] #pageTogger:hover:before,body.page-show[data-page-accent=\"blue\"] #pageTogger:hover:after{background-color:#03b8cf}body.page-show[data-page-accent=\"primary\"] #pageHeader&gt;.wrapper&gt;.icon{background-color:#039BE5;color:#fff}body.page-show[data-page-accent=\"primary\"] #pageContent&gt;section&gt;header:before{background-color:#e1f5fe}body.page-show[data-page-accent=\"primary\"] #pageContent&gt;section.hover&gt;header:before{background-color:#039BE5}body.page-show[data-page-accent=\"primary\"] #pageContent&gt;section.hover&gt;header:after{border-color:#039BE5}body.page-show[data-page-accent=\"primary\"] #pageContent&gt;section.hover&gt;header&gt;h3{color:#039BE5}body.page-show[data-page-accent=\"primary\"] #pageContent&gt;section.hover:before{border-color:#039BE5}body.page-show[data-page-accent=\"primary\"] #pageTogger:hover{border-color:#039BE5}body.page-show[data-page-accent=\"primary\"] #pageTogger:hover:before,body.page-show[data-page-accent=\"primary\"] #pageTogger:hover:after{background-color:#039BE5}body.page-show[data-page-accent=\"yellow\"] #pageHeader&gt;.wrapper&gt;.icon{background-color:#f1a325;color:#fff}body.page-show[data-page-accent=\"yellow\"] #pageContent&gt;section&gt;header:before{background-color:#fff0d5}body.page-show[data-page-accent=\"yellow\"] #pageContent&gt;section.hover&gt;header:before{background-color:#f1a325}body.page-show[data-page-accent=\"yellow\"] #pageContent&gt;section.hover&gt;header:after{border-color:#f1a325}body.page-show[data-page-accent=\"yellow\"] #pageContent&gt;section.hover&gt;header&gt;h3{color:#f1a325}body.page-show[data-page-accent=\"yellow\"] #pageContent&gt;section.hover:before{border-color:#f1a325}body.page-show[data-page-accent=\"yellow\"] #pageTogger:hover{border-color:#f1a325}body.page-show[data-page-accent=\"yellow\"] #pageTogger:hover:before,body.page-show[data-page-accent=\"yellow\"] #pageTogger:hover:after{background-color:#f1a325}body.page-show[data-page-accent=\"green\"] #pageHeader&gt;.wrapper&gt;.icon{background-color:#38b03f;color:#fff}body.page-show[data-page-accent=\"green\"] #pageContent&gt;section&gt;header:before{background-color:#ddf4df}body.page-show[data-page-accent=\"green\"] #pageContent&gt;section.hover&gt;header:before{background-color:#38b03f}body.page-show[data-page-accent=\"green\"] #pageContent&gt;section.hover&gt;header:after{border-color:#38b03f}body.page-show[data-page-accent=\"green\"] #pageContent&gt;section.hover&gt;header&gt;h3{color:#38b03f}body.page-show[data-page-accent=\"green\"] #pageContent&gt;section.hover:before{border-color:#38b03f}body.page-show[data-page-accent=\"green\"] #pageTogger:hover{border-color:#38b03f}body.page-show[data-page-accent=\"green\"] #pageTogger:hover:before,body.page-show[data-page-accent=\"green\"] #pageTogger:hover:after{background-color:#38b03f}body.page-show[data-page-accent=\"red\"] #pageHeader&gt;.wrapper&gt;.icon{background-color:#ea644a;color:#fff}body.page-show[data-page-accent=\"red\"] #pageContent&gt;section&gt;header:before{background-color:#ffe5e0}body.page-show[data-page-accent=\"red\"] #pageContent&gt;section.hover&gt;header:before{background-color:#ea644a}body.page-show[data-page-accent=\"red\"] #pageContent&gt;section.hover&gt;header:after{border-color:#ea644a}body.page-show[data-page-accent=\"red\"] #pageContent&gt;section.hover&gt;header&gt;h3{color:#ea644a}body.page-show[data-page-accent=\"red\"] #pageContent&gt;section.hover:before{border-color:#ea644a}body.page-show[data-page-accent=\"red\"] #pageTogger:hover{border-color:#ea644a}body.page-show[data-page-accent=\"red\"] #pageTogger:hover:before,body.page-show[data-page-accent=\"red\"] #pageTogger:hover:after{background-color:#ea644a}body.page-show[data-page-accent=\"brown\"] #pageHeader&gt;.wrapper&gt;.icon{background-color:#bd7b46;color:#fff}body.page-show[data-page-accent=\"brown\"] #pageContent&gt;section&gt;header:before{background-color:#f7ebe1}body.page-show[data-page-accent=\"brown\"] #pageContent&gt;section.hover&gt;header:before{background-color:#bd7b46}body.page-show[data-page-accent=\"brown\"] #pageContent&gt;section.hover&gt;header:after{border-color:#bd7b46}body.page-show[data-page-accent=\"brown\"] #pageContent&gt;section.hover&gt;header&gt;h3{color:#bd7b46}body.page-show[data-page-accent=\"brown\"] #pageContent&gt;section.hover:before{border-color:#bd7b46}body.page-show[data-page-accent=\"brown\"] #pageTogger:hover{border-color:#bd7b46}body.page-show[data-page-accent=\"brown\"] #pageTogger:hover:before,body.page-show[data-page-accent=\"brown\"] #pageTogger:hover:after{background-color:#bd7b46}body.page-show[data-page-accent=\"purple\"] #pageHeader&gt;.wrapper&gt;.icon{background-color:#8666b8;color:#fff}body.page-show[data-page-accent=\"purple\"] #pageContent&gt;section&gt;header:before{background-color:#f5eeff}body.page-show[data-page-accent=\"purple\"] #pageContent&gt;section.hover&gt;header:before{background-color:#8666b8}body.page-show[data-page-accent=\"purple\"] #pageContent&gt;section.hover&gt;header:after{border-color:#8666b8}body.page-show[data-page-accent=\"purple\"] #pageContent&gt;section.hover&gt;header&gt;h3{color:#8666b8}body.page-show[data-page-accent=\"purple\"] #pageContent&gt;section.hover:before{border-color:#8666b8}body.page-show[data-page-accent=\"purple\"] #pageTogger:hover{border-color:#8666b8}body.page-show[data-page-accent=\"purple\"] #pageTogger:hover:before,body.page-show[data-page-accent=\"purple\"] #pageTogger:hover:after{background-color:#8666b8}@media (max-width:767px){#navbar .navbar-nav&gt;li&gt;a{border-radius:0}#search{padding:30px 10px 40px}#ad{margin-top:-20px}#ad&gt;a{width:250px}#grid .col{width:100%}#page{top:0;z-index:1015}#pageContent{padding-left:0}#pageContent:before{display:none}#pageHeader&gt;.container{padding-left:60px}#pageHeader&gt;.container&gt;.icon{left:15px}#pageContent&gt;section:before{display:none}#pageContent&gt;section&gt;header:before,#pageContent&gt;section&gt;header:after{display:none}#pageContent&gt;section&gt;header&gt;h3{position:relative}#pageContent&gt;section&gt;header&gt;h3:before{display:none}#pageContent&gt;section&gt;header&gt;h3:after{content:'\\e651';font-family:ZenIcon;speak:none;font-size:14px;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;left:auto;right:-12px;top:1px}#pageContent&gt;section.collapsed&gt;header&gt;h3:after{content:'\\e650'}body.compact-mode #header{height:433px}body.compact-mode #grid{margin-top:463px}body.compact-mode #navbar .navbar-brand .zui-version,body.compact-mode #navbar .navbar-brand .brand-title{display:none}body.compact-mode #navbar .navbar-brand #compactTogger{margin-left:0;left:-12px}body.compact-mode #search{left:80px;right:60px}body.compact-mode #searchInput::placeholder{color:transparent}body.page-show #navbar .navbar-toggle{margin-right:0}body.input-query-focus.compact-mode #search{left:10px;right:10px}body.input-query-focus.compact-mode #searchInput::placeholder{color:#e5e5e5}body.input-query-focus.compact-mode #searchInput::placeholder{color:rgba(255,255,255,0.5)}body.input-query-focus.compact-mode #navbar .navbar-brand,body.input-query-focus.compact-mode #navbar .navbar-toggle{display:none}}body[data-page=\"basic-theme\"] #pageHeader,body[data-page=\"basic-theme\"] #pageHeader&gt;.container&gt;h2&gt;a.name{background-color:#039BE5;color:#fff}body[data-page=\"basic-theme\"] #pageHeader{border-color:#0279b3}body[data-page=\"basic-theme\"].page-show[data-page-accent=primary] #pageHeader&gt;.wrapper&gt;.icon{background-color:#0279b3}body[data-page=\"basic-theme\"] .path-btn:before,body[data-page=\"basic-theme\"] .path-btn:after,body[data-page=\"basic-theme\"] .path-btn&gt;.path-1,body[data-page=\"basic-theme\"] .path-btn&gt;.path-1:before,body[data-page=\"basic-theme\"] .path-btn&gt;.path-1:after{transition:all .2s cubic-bezier(.175, .885, .32, 1);border-color:#ddd;border-color:rgba(255,255,255,0.7)}#changeViewWrapper{display:none}@media (min-width:1200px){#changeViewWrapper{display:block;position:fixed;top:14px;right:15px;z-index:1030}#changeViewBtn{border-color:#fff;background-color:rgba(0,0,0,0.1);border-color:rgba(0,0,0,0);padding:5px;min-width:32px}#changeViewBtn:hover,#changeViewBtn:focus,#changeViewBtn:active{background-color:rgba(0,0,0,0.2)}body.view-double.compact-mode-in.page-open #changeViewBtn{color:#666}body.view-double.compact-mode-in.page-open[data-page=\"basic-theme\"] #changeViewBtn{color:#fff}body.view-double.compact-mode-in.page-open #navbar{width:360px;left:0;top:0;padding:10px 0 !important;margin-bottom:0}body.view-double.compact-mode-in.page-open #navbar .navbar-header{float:none}body.view-double.compact-mode-in.page-open #navbar .navbar-toggle{display:block;float:right;margin-right:0}body.view-double.compact-mode-in.page-open #navbar .navbar-collapse{display:none !important}body.view-double.compact-mode-in.page-open #navbar .navbar-collapse.in,body.view-double.compact-mode-in.page-open #navbar .navbar-collapse.collapsing{display:block !important;width:140px}body.view-double.compact-mode-in.page-open #navbar .navbar-collapse.in:before,body.view-double.compact-mode-in.page-open #navbar .navbar-collapse.collapsing:before{right:10px}body.view-double.compact-mode-in.page-open #navbar .navbar-collapse.in&gt;.navbar-right,body.view-double.compact-mode-in.page-open #navbar .navbar-collapse.collapsing&gt;.navbar-right{float:none !important;margin-right:0}body.view-double.compact-mode-in.page-open #navbar .navbar-collapse.in&gt;.navbar-nav&gt;li,body.view-double.compact-mode-in.page-open #navbar .navbar-collapse.collapsing&gt;.navbar-nav&gt;li{float:none}body.view-double.compact-mode-in.page-open #navbar .navbar-collapse.in&gt;.navbar-nav&gt;li&gt;a,body.view-double.compact-mode-in.page-open #navbar .navbar-collapse.collapsing&gt;.navbar-nav&gt;li&gt;a{border-radius:0}body.view-double.compact-mode-in.page-open #navbar #compactTogger,body.view-double.compact-mode-in.page-open #navbar .brand-title{display:none}body.view-double.compact-mode-in.page-open #headContainer{position:absolute;top:0;right:0;left:0}body.view-double.compact-mode-in.page-open #headContainer&gt;.container{width:100% !important}body.view-double.compact-mode-in.page-open #search{padding:0;right:60px;width:120px;left:auto;transition:width .2s}body.view-double.compact-mode-in.page-open #searchInput::placeholder{color:transparent;transition:color .2s}body.view-double.compact-mode-in.page-open.input-query-focus #search{width:240px}body.view-double.compact-mode-in.page-open.input-query-focus #navbar .zui-version{display:none}body.view-double.compact-mode-in.page-open.input-query-focus #searchInput::placeholder{color:rgba(255,255,255,0.5)}body.view-double.compact-mode-in.page-open #header{position:fixed;left:0;top:0;height:60px;width:360px;padding-top:60px}body.view-double.compact-mode-in.page-open #pageLoader{max-width:1160px}body.view-double.compact-mode-in.page-open #grid{position:fixed;padding:10px 0;top:60px;margin-top:0;left:0;bottom:0;width:360px;opacity:1 !important;transform:none !important;border-right:1px solid #ddd;overflow-y:auto}body.view-double.compact-mode-in.page-open #grid&gt;.container{width:100% !important}body.view-double.compact-mode-in.page-open #grid&gt;.container .row&gt;.col{width:100%}body.view-double.compact-mode-in.page-open #grid .chapter{margin-bottom:10px}body.view-double.compact-mode-in.page-open #grid .section-preview.icon-preview&gt;.icons&gt;.icon.icon-10x{font-size:70px}body.view-double.compact-mode-in.page-open #grid .section-preview.icon-preview&gt;.icons&gt;.icon.icon-5x{font-size:42px}body.view-double.compact-mode-in.page-open #grid .section-preview.icon-preview&gt;.icons&gt;.icon.icon-2x{font-size:28px}body.view-double.compact-mode-in.page-open #pageCloseBtn{display:none}body.view-double.compact-mode-in.page-open #pageReloadBtn{right:15px}body.view-double.compact-mode-in.page-open #page{display:block !important;position:fixed;left:360px;top:0;right:0;bottom:0}body.view-double.compact-mode-in.page-open #pageHeader&gt;.container{margin:0 auto 0 15px}body.view-double.compact-mode-in.page-open #pageBody&gt;.container{margin:0 auto 0 10px}body.view-double.compact-mode-in.page-open&gt;footer{position:fixed;left:0;bottom:0;width:340px;background:rgba(255,255,255,0.9)}body.view-double.compact-mode-in.page-open&gt;footer&gt;.container{width:100% !important}body.view-double.compact-mode-in.page-open&gt;footer hr{display:none}body.view-double.compact-mode-in.page-open&gt;footer p{margin:0;line-height:20px;height:20px}}@keyframes scale-shape{0%{opacity:0;transform:scale(0)}20%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}#changeViewModal .modal-dialog{max-width:450px;overflow:hidden}#changeViewModal .modal-body{padding:0}#changeViewModal .view-shape{position:absolute;left:20px;top:15px;width:120px;height:100px;background-color:#fff;border:1px solid #ddd}#changeViewModal .view-option-single .view-shape:before,#changeViewModal .view-option-single .view-shape:after{display:block;content:' ';position:absolute;top:0}#changeViewModal .view-option-single .view-shape:before{height:10px;background:#808080;right:0;left:0}#changeViewModal .view-option-single .view-shape:after{top:12px;background:#ddd;bottom:0;right:10px;left:10px}#changeViewModal .view-option-single .view-shape .s-1{position:absolute;top:13px;left:11px;right:11px;bottom:0;background:#fafafa;z-index:1}#changeViewModal .view-option-single .view-shape .s-1:before,#changeViewModal .view-option-single .view-shape .s-1:after{display:block;content:' ';position:absolute;top:5px;right:5px;left:5px;height:30px;border-top:5px solid #aaa;border-bottom:5px solid #bbb}#changeViewModal .view-option-single .view-shape .s-1:after{top:17px;right:30px;border-color:#ccc}#changeViewModal .view-option-double .view-shape:before,#changeViewModal .view-option-double .view-shape:after{display:block;content:' ';position:absolute;top:0;left:0;width:40px}#changeViewModal .view-option-double .view-shape:before{background:#808080;height:10px}#changeViewModal .view-option-double .view-shape:after{top:10px;bottom:0;background:#ddd}#changeViewModal .view-option-double .view-shape .s-1{position:absolute;top:0;left:42px;right:0;bottom:0;background:#fafafa;z-index:1}#changeViewModal .view-option-double .view-shape .s-1:before,#changeViewModal .view-option-double .view-shape .s-1:after{display:block;content:' ';position:absolute;top:5px;right:5px;left:5px;height:30px;border-top:5px solid #aaa;border-bottom:5px solid #bbb}#changeViewModal .view-option-double .view-shape .s-1:after{top:17px;right:30px;border-color:#ccc}#changeViewModal .view-option{padding:15px;padding-left:160px;display:block;position:relative;min-height:130px;cursor:pointer}#changeViewModal .view-option&gt;.title{font-size:14px;color:#333;font-weight:bold;margin-bottom:5px;opacity:.7}#changeViewModal .view-option.active,#changeViewModal .view-option:hover,#changeViewModal .view-option:focus,#changeViewModal .view-option:active{background-color:#e1f5fe;color:#039BE5;text-decoration:none}#changeViewModal .view-option.active .view-shape:before,#changeViewModal .view-option:hover .view-shape:before,#changeViewModal .view-option:focus .view-shape:before,#changeViewModal .view-option:active .view-shape:before{background:#039BE5}#changeViewModal .view-option.active .view-shape .s-1,#changeViewModal .view-option:hover .view-shape .s-1,#changeViewModal .view-option:focus .view-shape .s-1,#changeViewModal .view-option:active .view-shape .s-1{animation:scale-shape 2s infinite linear normal}#changeViewModal .view-option.active&gt;.title,#changeViewModal .view-option:hover&gt;.title,#changeViewModal .view-option:focus&gt;.title,#changeViewModal .view-option:active&gt;.title{opacity:1}#changeViewModal .view-option.active{background:#e1f5fe}#changeViewModal .view-option.active&gt;.title:after{content:'(当前)';color:#039BE5;display:inline-block;margin-left:5px;font-weight:normal}#changeViewModal .view-option.active .view-shape{border-color:#039BE5;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #51c5fd}"</span><span class="pln">
</span><span class="pun">}</span></pre></td><td><a href="javascript:;" class="text-danger store-delete"><i class="icon-trash"></i></a></td></tr><tr><td>1</td><td class="store-name">mzuiTip</td><td><pre style="padding: 5px; margin: 0px;" class="prettyprint prettyprinted"><span class="str">"2018-10-20 10:29:43"</span></pre></td><td><a href="javascript:;" class="text-danger store-delete"><i class="icon-trash"></i></a></td></tr><tr><td>2</td><td class="store-name">pageViewLayout</td><td><pre style="padding: 5px; margin: 0px;" class="prettyprint prettyprinted"><span class="str">"single"</span></pre></td><td><a href="javascript:;" class="text-danger store-delete"><i class="icon-trash"></i></a></td></tr><tr><td>3</td><td class="store-name">page_/</td><td><pre style="padding: 5px; margin: 0px;" class="prettyprint prettyprinted"><span class="pun">{</span><span class="pln">
  </span><span class="str">"zui.calendar.calendarExample"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="str">"date"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"2018-07-13T09:48:03.685Z"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"view"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"month"</span><span class="pln">
  </span><span class="pun">},</span><span class="pln">
  </span><span class="str">"datatable-selectableDatableExample_scrollOffset"</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln">
</span><span class="pun">}</span></pre></td><td><a href="javascript:;" class="text-danger store-delete"><i class="icon-trash"></i></a></td></tr><tr><td>4</td><td class="store-name">first_open_page</td><td><pre style="padding: 5px; margin: 0px;" class="prettyprint prettyprinted"><span class="kwd">false</span></pre></td><td><a href="javascript:;" class="text-danger store-delete"><i class="icon-trash"></i></a></td></tr></tbody>
    <tfoot>
      <tr>
        <td colspan="2">
          <div class="input-group">
            <span class="input-group-addon">名称</span>
            <input type="text" id="storeName" name="storeName" class="form-control">
            <span class="input-group-addon fix-border">值</span>
            <input type="text" id="storeValue" name="storeValue" class="form-control">
            <span class="input-group-btn"><button type="button" id="storeAdd" class="btn btn-primary">保存</button></span>
          </div>
        </td>
        <td colspan="2"><button type="button" class="btn btn-danger" id="storeClear">清空</button></td>
      </tr>
    </tfoot>
  </table>
</div></article></section>






<section><header><h3>如何使用</h3></header><article><p>要使用本地存储，直接使用<code>$.zui.store</code>对象。<code>store</code>提供了一系列方法来操作本地存储数据。</p><p>以下列出store对象提供的属性和方法：</p><div class="table-responsive"><table class="table table-bordered">
  <thead>
    <tr>
      <th>属性或方法</th>
      <th>说明</th>
      <th>参数和要点</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>store.enable</code></td>
      <td>属性，指示本地存储是否可用</td>
      <td>如果浏览器不支持本地存储，则该值为<code>false</code>。</td>
    </tr>
    <tr>
      <td><code>store.storage</code></td>
      <td>属性，返回浏览器原生<code>localStorage</code>对象</td>
      <td></td>
    </tr>
    <tr>
      <td><code>store.length()</code></td>
      <td>方法，返回本地存储条目数量</td>
      <td>即使本地存储不可用时也会返回0。</td>
    </tr>
    <tr>
      <td><code>store.remove(key)</code></td>
      <td>移除指定的条目</td>
      <td>参数：

<em>   <code>key</code>：需要移除的条目的名称。</em></td>
    </tr>
    <tr>
      <td><code>store.get(key)</code></td>
      <td>获取存储条目的值</td>
      <td>参数：

   <code>key</code>：存储条目的名称。

与原生的<code>getItem</code>方法不同，该方法会进行反序列化操作，返回类型为存储的值的原类型。</td>
    </tr>
    <tr>
      <td><code>store.set(key, value)</code></td>
      <td>设置存储条目的值</td>
      <td>参数：

<em>   <code>key</code>：存储条目的名称。
</em>   <code>value</code>：可选，存储条目的名称，如果该值为<code>null</code>或者缺省，则会移除之前存储的值。

与原生的<code>setItem</code>方法不同，该方法会进行序列化操作，所有value可以为任意类型，但不能是函数或者对象属性包含函数。</td>
    </tr>
    <tr>
      <td><code>store.key(index)</code></td>
      <td>根据索引获取存储条目的名称</td>
      <td>参数：

<em>   <code>index</code>：条目索引，为自然数。</em></td>
    </tr>
    <tr>
      <td><code>store.forEach(callback)</code></td>
      <td>遍历所有存储条目</td>
      <td>参数：

   <code>callback</code>：遍历函数，该函数提供两个参数，第一个参数为当前遍历条目的名称，第二个参数为值。</td>
    </tr>
    <tr>
      <td><code>store.serialize(value)</code></td>
      <td>将一个任意类型的值序列化为字符串</td>
      <td>参数：

<em>   <code>value</code>：需要序列化的值。</em></td>
    </tr>
    <tr>
      <td><code>store.deserialize(value)</code></td>
      <td>将一个字符串反序列化为值或对象。</td>
      <td>参数：

   <code>value</code>：需要反序列化的字符串。</td>
    </tr>
    <tr>
      <td><code>store.getAll()</code></td>
      <td>获取所有存储的条目</td>
      <td>返回一个对象，该对象的属性和对应的属性值记为存储的条目。</td>
    </tr>
    <tr>
      <td><code>store.removeItem(key)</code></td>
      <td>方法<code>store.remove()</code>的别名写法</td>
      <td>参数：

<em>   <code>key</code>：需要移除的条目的名称。</em></td>
    </tr>
    <tr>
      <td><code>store.getItem(key)</code></td>
      <td>获取指定名称的条目值</td>
      <td>该方法相当于<code>localStorage.getItem(key)</code>，获取的值永远是序列化之后的字符串。

参数：

   <code>key</code>：条目名称。</td>

    </tr>
    <tr>
      <td><code>store.setItem(key, value)</code></td>
      <td>设置存储的值</td>
      <td>该方法相当于<code>localStorage.setItem(key, value)</code>

参数：

<em>   <code>key</code>：存储的名称
</em>   <code>value</code>：存储的值</td>
    </tr>
  </tbody>
</table></div><h4>代码示例</h4><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="pln">store</span><span class="pun">.</span><span class="kwd">set</span><span class="pun">(</span><span class="str">'name'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'catouse'</span><span class="pun">);</span><span class="pln">                      </span><span class="com">// 使用本地存储设置'name'值为'catouse'</span><span class="pln">
$</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="pln">store</span><span class="pun">.</span><span class="kwd">set</span><span class="pun">(</span><span class="str">'date'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">year</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2014</span><span class="pun">,</span><span class="pln"> month</span><span class="pun">:</span><span class="pln"> </span><span class="lit">8</span><span class="pun">,</span><span class="pln"> day</span><span class="pun">:</span><span class="pln"> </span><span class="lit">6</span><span class="pun">});</span><span class="pln"> </span><span class="com">// 将一个对象存储到本地存储</span><span class="pln">

console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">$</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="pln">store</span><span class="pun">.</span><span class="kwd">get</span><span class="pun">(</span><span class="str">'name'</span><span class="pun">));</span><span class="pln">                    </span><span class="com">// 从本地存储获取'name'的值</span><span class="pln">
console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">$</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="pln">store</span><span class="pun">.</span><span class="kwd">get</span><span class="pun">(</span><span class="str">'date'</span><span class="pun">).</span><span class="pln">year</span><span class="pun">);</span><span class="pln">               </span><span class="com">// 从本地存储获取'date'值的year属性</span><span class="pln">

$</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="pln">store</span><span class="pun">.</span><span class="pln">forEach</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">key</span><span class="pun">,</span><span class="pln"> value</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">               </span><span class="com">// 遍历所有本地存储的条目</span><span class="pln">
    console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">value</span><span class="pun">);</span><span class="pln">
</span><span class="pun">});</span><span class="pln">

console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">$</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="pln">store</span><span class="pun">.</span><span class="pln">key</span><span class="pun">(</span><span class="lit">0</span><span class="pun">));</span><span class="pln">                         </span><span class="com">// 获取本地存储第一个条目的名称</span><span class="pln">

$</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="pln">store</span><span class="pun">.</span><span class="pln">remove</span><span class="pun">(</span><span class="str">'name'</span><span class="pun">);</span><span class="pln">                              </span><span class="com">// 从本地存储移除‘name’的值</span><span class="pln">
$</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="pln">store</span><span class="pun">.</span><span class="pln">clear</span><span class="pun">();</span><span class="pln">                                     </span><span class="com">// 清空所有本地存储的条目</span></code></pre></article></section>





<script>
function afterPageLoad(){
    $('#storeExample .alert-' + ($.zui.store.enable ? 'success' : 'warning')).removeClass('hide');

    var $storeTable = $('#storeTable');
    function refershStore() {
        $storeTable.empty();
        var index = 0;
        $.zui.store.forEach(function(key,value) {
            if(key.indexOf('//') === 0) return;
            $storeTable.append('<tr><td>{0}</td><td class="store-name">{1}</td><td><pre style="padding: 5px; margin: 0" class="prettyprint">{2}</pre></td><td><a href="javascript:;" class="text-danger store-delete"><i class="icon-trash"></i></a></td></tr>'.format(index++, key, typeof value === 'object' ? JSON.stringify(value, null, 2) : (typeof value === 'string' ? ('"' + value + '"') : value)));
        });
        $storeTable.find('.store-delete').click(function() {
            $.zui.store.remove($(this).closest('tr').children('.store-name').text());
            refershStore();
        });
        window.prettyPrint();
    }
    $storeTable.click()
    $('#storeAdd').click(function() {
        var key = $('#storeName').val(),
            val = $('#storeValue').val();
        if(key) {
            $.zui.store.setItem(key, val);
            refershStore();
        } else {
            bootbox.alert('必须填写名称。');
        }
    });

    $('#storeClear').click(function() {
        $.zui.store.clear();
        refershStore();
    });

    refershStore();
}
</script><section><header><h3>本地页面存储</h3></header><article><p>很多时候，不同页面相同名称的条目的值需要分别保存。<code>store</code>对象提供了一系列方法和属性来读写同一页面（相同路径）的条目。</p><div class="table-responsive"><table class="table table-bordered">
  <thead>
    <tr>
      <th>属性或方法</th>
      <th>说明</th>
      <th>参数和要点</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>store.page</code></td>
      <td>属性，当前页面存储的数据对象</td>
      <td><em>   该对象的属性或对应的值即为对应的条目。
</em>   这些属性都可以读写，如果进行了更改操作，需要调用<code>store.pageSave()</code>方法来存储到本地。如果将属性设置为<code>null</code>，则会在下次调用<code>pageSave()</code>时移除该属性。</td>
    </tr>
    <tr>
      <td><code>store.pageGet(key)</code></td>
      <td>获取当前页面指定名称的值</td>
      <td>参数：

<em>   <code>key</code>：指定条目的名称。</em></td>
    </tr>
    <tr>
      <td><code>store.pageSet(key,value)</code></td>
      <td>设置值</td>
      <td>参数：

   <code>key</code>：名称
<em>   <code>value</code>：值</em></td>
    </tr>
    <tr>
      <td><code>store.pageClear()</code></td>
      <td>清除当前页面所有存储的条目</td>
      <td></td>
    </tr>
    <tr>
      <td><code>store.pageRemove(key)</code></td>
      <td>移除当前页面存储的指定条目</td>
      <td>参数：

   <code>key</code>：指定条目的名称。</td>
    </tr>
    <tr>
      <td><code>store.pageSave()</code></td>
      <td>立即保存当前页面存储的条目到本地存储</td>
      <td>一般情况下不需要调用此方法，除非手动更改<code>store.page</code>属性。</td>
    </tr>
  </tbody>
</table></div><h4>代码示例</h4><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">/* 以下操作的键值仅针对当前页面 */</span><span class="pln">
$</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="pln">store</span><span class="pun">.</span><span class="pln">pageSet</span><span class="pun">(</span><span class="str">'name'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'catouse'</span><span class="pun">);</span><span class="pln">                      </span><span class="com">// 使用本地存储设置'name'值为'catouse'</span><span class="pln">
$</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="pln">store</span><span class="pun">.</span><span class="pln">pageSet</span><span class="pun">(</span><span class="str">'date'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">year</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2014</span><span class="pun">,</span><span class="pln"> month</span><span class="pun">:</span><span class="pln"> </span><span class="lit">8</span><span class="pun">,</span><span class="pln"> day</span><span class="pun">:</span><span class="pln"> </span><span class="lit">6</span><span class="pun">});</span><span class="pln"> </span><span class="com">// 将一个对象存储到本地存储</span><span class="pln">

console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">$</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="pln">store</span><span class="pun">.</span><span class="pln">pageGet</span><span class="pun">(</span><span class="str">'name'</span><span class="pun">));</span><span class="pln">                    </span><span class="com">// 从本地存储获取'name'的值</span><span class="pln">
console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">$</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="pln">store</span><span class="pun">.</span><span class="pln">pageGet</span><span class="pun">(</span><span class="str">'date'</span><span class="pun">).</span><span class="pln">year</span><span class="pun">);</span><span class="pln">               </span><span class="com">// 从本地存储获取'date'值的year属性</span><span class="pln">

$</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="pln">store</span><span class="pun">.</span><span class="pln">pageRemove</span><span class="pun">(</span><span class="str">'name'</span><span class="pun">);</span><span class="pln">                              </span><span class="com">// 从本地存储移除‘name’的值</span><span class="pln">
$</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="pln">store</span><span class="pun">.</span><span class="pln">pageClear</span><span class="pun">();</span><span class="pln">                                     </span><span class="com">// 清空所有本地存储的条目</span></code></pre></article></section></div>
</section>
{/block}